Question

我有4个小文本体，我想在页面上均匀显示。这是我想到的图像：

ideal

有些东西告诉我桌子是最好的方法，但是a）我总是被告知不要使用它们而b）因此，我不知道怎么做，如果这实际上是最好的路线。

我愿意接受建议;任何和所有的帮助表示赞赏。

Answer 1

我相信这样的事情会起作用：

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

Answer 2

特拉维斯很好，这个版本为您提供了更多的工作，并允许您拨打块之间的填充。背景颜色就在那里，你可以看到它是如何工作的。

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>

Answer 3

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 />'

Answer 4

我会做这样的事情。如果您不想要液体布局，只需用百分比替换百分比。

CSS：

* {
   box-sizing:border-box;
   -moz-box-sizing:border-box; /* Firefox */
   -webkit-box-sizing:border-box; /* Safari */
}

#container {
   width: 80%; 
   margin: 0px auto;
}
#container div {
   width: 25%; /* 25% percent of the #container width */
   padding: 10px; 
   float: left
}

HTML：

<div id="container">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
  <div>Content 4</div>
</div>

不确定如何实现这一点.. 4个文本部分均匀分布在页面上？

4 个答案:

CSS：

HTML：