有没有办法让容器溢出到左边？

Question

与标题相同，真的。我有两个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 */
}

Answer 1

您可以使用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/

Answer 2

您可以使用direction来显示相反方向的滚动条，或使用内容上的float:right将其隐藏在左侧 的 DEMO

HTML

<div class="ovfleft">
  <p> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
</div>
<div class="hidetoleft">
  <p> lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
</div>

CSS

div {
    width:300px;
  margin:3px auto;
  border:solid;
}
.ovfleft {
  direction:rtl;
  overflow:auto;
}
p {
  width:500px;
  direction:ltr;
}
.hidetoleft {
  overflow:hidden;
}
.hidetoleft p {
  float:right;
}