3

我有一个带有两个 div 的页面布局。它们都是 float:left ，因此显示为彼此相邻的列。我希望他们保持这种状态。但是，如果最右侧 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>

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

4

3 回答 3

4

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

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 框架，它可以根据指定的列数完美地衡量这些事情。看：

于 2012-10-09T13:22:49.773 回答
0

您可以为这些 div 设置位置，例如

.left{width: 50%; position:relative; top:0%; left:0%;}
.right{width: 50%; position:relative; top:0%; left:50%;}
于 2012-10-09T13:32:18.673 回答
-2

I was able to solve it with a table. When the window is made smaller, at first only the right column is made smaller and the words squeeze down on more lines until the column has disappeared. If the browser is made smaller than the width of the left column, then the left column starts disappearing, cutting off words. Works in my Chrome and IE although I don't know about older 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>
于 2012-10-10T05:57:13.267 回答