0

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

理想的

有些东西告诉我桌子是最好的选择，但是a）我一直被告知不要使用它们，b）因此，如果这实际上是最好的方法，我不知道该怎么做.

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

4

4 回答 4

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>

看到这个 jsFiddle

于 2012-06-18T21:47:05.930 回答
0

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>
于 2012-06-18T21:55:49.620 回答
0

我会做这样的事情。如果您不想要液体布局，只需将百分比替换为像素即可。

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>
于 2012-06-18T23:06:12.973 回答
0

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 />'
于 2012-06-18T22:17:09.183 回答