不知道如何实现这一点..4个部分的文本均匀分布在页面上？
不知道如何实现这一点..4个部分的文本均匀分布在页面上？
提问于 2012-06-19 05:36:17
我有4个小正文，我想均匀地显示在整个页面上。这是我脑海中的图像：
有些东西告诉我，表格将是最好的方法，但a)我总是被告知不要使用它们，b)正因为如此，我不知道如何这样做，如果这实际上是最好的方法。
我乐于接受您的建议，感谢您的任何帮助。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-19 05:47:06
我相信这样的东西会起作用的：
CSS：
html, body
{
width: 100%;
padding: 0px;
margin: 0px;
border: none;
}
div.content
{
float: left;
vertical-align: top;
margin: 0px;
padding: 0px;
width: 25%;
}HTML：
<div class="content">Blah</div><div class="content">blah blah</div>
<div class="content">Blah Blah</div><div class="content">blah blah blah blah</div>请参阅this jsFiddle
Stack Overflow用户
发布于 2012-06-19 05:55:50
Travis的很好，这个版本给你提供了更多的工作，并将让你在块之间的填充拨号。背景颜色就在那里，让你看看它是如何工作的。
CSS：
.testimonials {
border:1px solid black;
}
.testimonial {
float:left;
width:25%;
background-color:#ccc;
}
.testimonial blockqoute {
display:block;
padding:20px;
background-color:yellow;
font-style:italic;
}
.testimonial attr {
display:block;
font-style:normal;
}
.clear {
clear:both;
}HTML：
<div class="testimonials">
<h3>Client Testimonials</h3>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="clear"></div>
</div>Stack Overflow用户
发布于 2012-06-19 06:17:09
HTML
<div id="content">
<h1>title</h1>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
CSS
'#content {width:100%; overflow:auto; padding:20px 0}<br />
.text_tontent {width:25%; float:left;}<br />
.text_tontent p {padding:0 10px;}<br />'页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11091449
复制相关文章
相似问题
腾讯云开发者
