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

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 に答える
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 に答える