有没有办法让容器溢出到左边？(Is there any way to make a container overflow to the left?)

有没有办法让容器溢出到左边？(Is there any way to make a container overflow to the left?)

真的，与标题相同。 我有两个div，每个宽度为50％。 图像可能最终出现在任何一个图像中，如果右图像太宽，它只会向右溢出。 完善。 但左边的图像也是如此。 不用说，这会扰乱两个div的50/50外观。

那么 - 有没有办法强制溢出到LEFT ？

谢谢。

HTML：

<div class="container"> <div class="content_1"> <img> </div> <div class="content_1"> <img> </div> </div>

CSS：

.container { width: 100%; max-width: 1100px; } .container > div { width: 50%; } .container_1 { overflow: left /* I know this doesn't exist... yet */ }

Same as the heading, really. I have two divs, each 50% width. An image might end up in either one and if the right image is too wide it simply overflows right. Perfect. But so does the image on the left. Needless to say this messes up the 50/50 appearance of the two divs.

So -- is there any way to force an overflow to the LEFT?

Thanks.

HTML:

<div class="container"> <div class="content_1"> <img> </div> <div class="content_1"> <img> </div> </div>

CSS:

.container { width: 100%; max-width: 1100px; } .container > div { width: 50%; } .container_1 { overflow: left /* I know this doesn't exist... yet */ }

最满意答案

您可以使用css属性direction:rtl强制文本的从右到左的行为，在溢出图像的上下文中给出了它溢出到左侧的印象。

基本示例：

HTML：

<div class="container"> <div class="image image1"><img src="http://placehold.it/800x300"/></div> <div class="image image2"><img src="http://placehold.it/800x300"/></div> </div>

CSS：

* { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .container { width:100%; } .image { width:50%; border:1px solid red; float:left; overflow:auto; } .image1 { direction: ltr; } .image2 { direction: rtl; }

演示： http ： //jsfiddle.net/n5LyR/1/

You can use the css property direction:rtl to force the right-to-left behaviour of text which in the context of overflowing an image gives the impression that it is being overflowed to the left.

Basic example:

HTML:

<div class="container"> <div class="image image1"><img src="http://placehold.it/800x300"/></div> <div class="image image2"><img src="http://placehold.it/800x300"/></div> </div>

CSS:

* { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .container { width:100%; } .image { width:50%; border:1px solid red; float:left; overflow:auto; } .image1 { direction: ltr; } .image2 { direction: rtl; }

Demonstration: http://jsfiddle.net/n5LyR/1/