我想这样做:
这是我目前拥有的 HTML/CSS，但是在尝试了 float 、位置绝对/相对、左侧、左边距、清除、溢出等的各种组合之后。我无法让它处理不同的长度.
<!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 进行哪些更改才能像上面的屏幕截图那样处理两列中的可变长度文本？
最佳答案
请看这个 fiddle :http://jsfiddle.net/UHMtW/
1) 删除所有那些可怕的空 div 以清除 float (只需使用 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 正确使用标题和段落)
关于html - 如何使用内容长度不同的文本创建左/右 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10014211/