Question

我有一个带有两个div的页面布局。它们都是浮动的：左边，因此显示为彼此相邻的列。我希望他们保持这种状态。但是，如果最右边的div中的文本太长，则整个文本会向下移动到最左边的列下方。如果文本很短，也会发生这种情况，但我会缩小浏览器窗口。我想要的是长文本占用更多行，但只在其自己的右栏中。

CSS：

.left{float:left}
.right{float:left}

HTML：

<div id="container">
    <div class = "left">
         <span>some text</span>
    </div>
    <div class = "right">
        <span>some long text....</span>
    </div>
</div>

编辑：此外，左栏应保持固定。

Answer 1

听起来你想做这样的事情：

http://jsfiddle.net/VV4Hc/8/

外部容器指定这两个div应占用的宽度。如您所见，它们也具有百分比宽度，因此您可以更改容器的属性，而无需返回并更改div。

警告的话，记得要清除你的花车，这样其他元素就不会被浮起来“抓住”。要做到这一点，只需定义一个具有属性clear:both的元素，如下所示：

.container {
  width: 1000px;
  margin: 0px auto; /* This will center the container on the page. */
 }
.left, .right {
   float: left; 
   width: 50%;
}
.clearfix {clear:both;}

<div class="container">
  <div class="left">...</div>
  <div class="right">...</div>
  <div class="clearfix"></div>
  <p>I won't get caught.</p>
</div>

如果您希望为布局执行此操作，您可能需要考虑一个CSS框架，它具有基于指定数量的列完美测量的这些类型的东西。参见：

Answer 2

您可以设置像

这样的div的位置

.left{width: 50%; position:relative; top:0%; left:0%;}
.right{width: 50%; position:relative; top:0%; left:50%;}

Answer 3

我能够用桌子来解决它。当窗口变小时，首先只将右列缩小，然后在更多行上向下挤压，直到列消失。如果浏览器的宽度小于左列的宽度，则左列开始消失，切断单词。适用于我的Chrome和IE，虽然我不知道旧的IE。

.td_right{vertical-align:top; max-width:300px;}
.td_left{vertical-align:top; min-width:300px; width:300}

<table >
    <tr> 
        <td class = "td_left">
            stuff here
        </td> 
        <td class = "td_right">
            stuff here 
        </td>
    </tr>
</table>

CSS页面布局，将文本保存在自己的div列中

3 个答案: