0

将来の Web サイト用に複数のボックスを作成するのに問題があります。これは私のCSS3コーディングです:

   #content-box1, #content-box2, #content-box3, #content-box4{
   padding:10px;
   border:1px solid #bbb;
   position:absolute;
   margin-top:190px;
   height:120px;
   }

   #content-box1 {
   margin-left:212px;
   width:200px;
   }

   #content-box2 {
   margin-left:444px;
   width:200px;
   }

   #content-box3 {
   margin-left:676px;
   width:202px;
   }

   #content-box4 {
   margin-left:676px;
   width:202px;
   }

ここに私のHTMLがあります：

   <!doctype html>

   <html><head>
   <meta charset="UTF-8">
   <title>Complex XHTML and CSS Home Page Layout Test</title>
   <link href="myflex.css" rel="stylesheet" type="text/css"/>
   <style type="text/css">
   </style>

   <body>

   <div id="wrapper">

   <div id="header">Header</div>

   <div id="content-box1"><p>Box 1</p></div>
   <div id="content-box2"><p>Box 2</p></div>
   <div id="content-box3"><p>Box 3</p></div>

   <div id="content-box4"><p>Box 4</p></div>

   <div id="content">
   <div id="content-left">
   <p>Left Column text here. This could be your site menu...</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   </div>
   <div id="content-main">
   <p>Main home page content or image goes here...</p>
   </div>
   </div>

   <div id="footer">Footer text and links can go all the way along here... text text text text    
   text text...</div>
   <div id="bottom"><a title="Acuras Web Development" href="http://www.acuras.co.uk">Acuras Web   
   Development</a></div>
   </div>

   <script language="JavaScript" type="text/javascript">
   var gDomain="www.qsstats.com";
   var gDcsId="dcs37pv2c00000oun93vypyva_4k6d";
   var gFpc="WT_FPC";
   var gConvert=true;
   var gFpcDom = "cumberlandcountyweather.com";
   if ((typeof(gConvert) != "undefined") && gConvert && (document.cookie.indexOf(gFpc + "=") ==   
   -1) && (document.cookie.indexOf("WTLOPTOUT=")==-1)) {
   document.write("<SCR"+"IPT TYPE='text/javascript' SRC='http"+
   (window.location.protocol.indexOf('https:')==0?'s':'')+"://"+gDomain+"/"+gDcsId+"/wtid.js"+"'>
   <\/SCR"+"IPT>");
   }
   function dcsAdditionalParameters() {}
   </script>

   <script type="text/javascript" src="/imageserver/common/webtrends.js"></script>

   <noscript><img alt="" border="0" name="DCSIMG" width="1" height="1" src="http://www.qsstats.com
   /dcs37pv2c00000oun93vypyva_4k6d/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=8.0.2;
   WT.qs_dlk=UXr12grIZ2IAAAPMvT4AAAAY;" /></noscript>

   </body>
   </html>

私たちがやろうとしているのは、複数のボックスを作成できるようにすることです。たとえば、最初の行に少なくとも 3 つのボックス、2 番目の行にさらに 3 つのボックスなどを作成します。これらのボックスには、私のリンクと、場合によっては写真が含まれます。

この状況で私を助けてもらえますか？

4

2 に答える 2

1

すべてのボックスに共通のものを与えclassますcontent-box。次に、次のようなもの:

.content-box {
    padding:10px;
    border:1px solid #bbb;
    height:120px;
    width:200px;
    float:left; /* this is the key */
}

そこから始めましょう。浮かせて並べて表示するという発想です。コンテナーの右端に到達すると、次の行にオーバーフローします。すべての要素を 1 つのコンテナーにラップしたいcontent-box場合は、そのコンテナーにパディング/ポジショニングを追加して、必要な場所にボックスをグループとして配置できます。

必要のない by-id css ルールをすべて削除します (例:#content-box1など)。

于 2013-05-08T16:49:27.903 に答える
0

3 つの簡単なオプション:

1: テーブルを使用します。

表は、レイアウトと列の数を簡単に制御できますが、応答しない場合があります (小さな画面の場合など)。 

<table>
    <tr>
        <td>Box 1</td>
        <td>Box 2</td>
        <td>Box 3</td>
    </tr>
    <tr>
        <td>Box 4</td>
        <td>Box 5</td>
        <td>Box 6</td>
    </tr>
</table>

http://jsfiddle.net/ahVNg/

2: と を使用display: inline-blockしposition: relativeます。

これらを使用すると、より流動的なグリッドが可能になり、小さな画面の場合に役立ちますが、適切に調整されていないと見栄えの悪い大きな空白スペースが残る可能性があるため、各ブロックの幅には注意する必要があります。

ここでの問題点は、コンテナを にfont-size設定し0、各ボックスのフォント サイズを通常12pt(または必要に応じて) にして、ボックス間に隙間がないようにする必要があることです。

あいまいな点があるため、個人的にはお勧めしませんが、機能するため、font-sizeここにリストしました。

使用するposition: relativeか、位置を指定しないでください。position: absolute 動作しません。

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
<div>Box 5</div>
<div>Box 6</div>

CSS

body {
    font-size: 0;
}
div {
    display: inline-block;
    width: 33%;
    height: 100px;
    font-size: 12pt;
}

http://jsfiddle.net/yPv9F/

3: フロートを使用する

おそらく、フロートが親友だと主張するほとんどのデザイナー/開発者の間で、3 つすべてのオプションの中で最も人気のあるオプションです。

float: leftorを使用すると、float: right基本的に のすべての優れた機能が提供display: inline-blockされ、s を切り替える必要はありませfont-sizeん。

HTML は #2 と同じですが、CSS は次のようになります。

div {
    float: left;
    width: 33%;
    height: 100px;
}

これは明らかにはるかに短いです。

http://jsfiddle.net/hLDRy/

結論

達成しようとしていることに応じて、3 つの (またはおそらく他のオプション) のいずれかで問題ありません。Fiddles を少しいじって、どれがあなたのニーズに最も合っているか見てみましょう。

最後に 1 つ: s の優れた点<td>は、コンテンツを垂直方向に整列させることですが、これは通常<div>の s でline-heightプロパティを使用して行うこともできます ( div 内の要素の垂直方向の整列を参照) 。

アップデート：

Madbreaks の回答に完全に同意します。すべての ID をまとめるのではなく、クラスを使用します。それははるかに効率的で、はるかに見栄えがします。

于 2013-05-08T17:07:29.883 に答える