Question

我想这样做：

enter image description here

这是我到目前为止的HTML / CSS，但在尝试浮动，位置绝对/相对，左边距，左边距，清除，溢出等的各种组合后，我无法处理不同的长度

<!DOCTYPE html> 
<html>
<head>
    <style>
        .container {
        }
        .leftColumn {
            float:left;
        }
        .rightColumn {
            float:left;
            left:120px;
            position:absolute;
        }
        .clear {
            clear:both;
        }
    </style>
</head>
<body>
  <div class="container">
        <div class="leftColumn">Apr 14: Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>
  <div class="container">
        <div class="leftColumn">Apr 15: Another Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>
  <div class="container">
        <div class="leftColumn">Apr 16: A Still Longer Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>

</body>
</html>

我需要更改为上面的CSS，以便它在两个列中处理可变长度文本，如上面的屏幕截图所示？

Answer 1

看到这个小提琴：http://jsfiddle.net/UHMtW/

1）删除所有那些可怕的空div以清除浮动（只使用easyclearing或其他一些非结构等效技术）

2）您错过了每个</div>

的所有结束.rightColumn

3）使用此css代码[已更新]

.container {
     height: auto; overflow: hidden; width: 100%;
     margin : 0 0 20px 0;
 }
 .leftColumn {
     float:left;
     width : 120px;
 }
 .rightColumn {
     margin-left: 120px;   
 }

当然会根据您的喜好更改元素的宽度，并为.container元素提供一些余量

（另外请注意我建议使用描述列表<dl>，但这需要为左列设置最大高度。或者你可以使用标题来避免所有<div>ification段落正确）

如何使用内容长度不同的文本创建左/右div？

1 个答案: