0

div 内のいくつかの子要素に問題があります。親 div はヘッダーであり、理論上は 3 列のヘッダーを保持することになっています。スライドショーとなる左の列、20px の仕切りとなる中央、情報テキストを保持する右の列があります。

私が抱えている問題は、正しい列をインラインのままにするように見える唯一の方法は、テキストを右揃えにすることですが、テキストを中央に配置する必要があるため、美的には機能しません。

DIV に右にフロートするように指示したかったのですが、これを行うと、ヘッダー div 内にフロートするのではなく、常に次の行に移動します。問題の例を次に示します (http://cbchaverhill.onedirectionconnection.com/)。ヘッダー以外はすべて無視してください (これらの要素の作業はまだ開始されていません)。

ここに私のCSSがあります:

div#header {
clear: both;
height: 300px;  
width: 900px;
margin-top: 0px;
padding: 0px;
border: 0px;
}

div#slide {
float: left;
clear: both;
height: 300px;
width: 590px;
margin-top: 0px;
padding: 0px;
border: 0px;
background: #FFFFFF;
}

div#divide {

 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 overflow: hidden;
 width: 20px;
 height: 300px;
 float: left;
 background: url(/wp-content/themes/cbc/divide.png) no-repeat;

}

div#cbcstuff{
display:  inline-block;
float: right;
clear: both;
height: 300px;
width: 290px;
margin-top: 0px;
padding: 0px;
border: 0px;
background: #FFFFFF;
}

そして、ヘッダーのコーディングは次のとおりです。

<div id="header">

<div id="slide"></div>
<div id="divide"></div>

<div id="cbcstuff">
Calvary Baptist Church<br>
Haverhill, MA 01832
</div>

</div>

テキストを右に揃えなくても、右の列を右に揃える方法についてアドバイスをいただけますか?

お時間をいただきありがとうございます！

〜ノエル

4

3 に答える 3

1

と を削除clear: both;しdiv#slideてみてくださいdiv#cbcstuff。そのコマンドを使用して、float スタイルをクリアします。

于 2012-07-25T18:02:37.880 に答える
0

div#cbcstuff から「clear: both」を削除

于 2012-07-25T18:03:25.477 に答える
0

クリア：両方。ここで問題の原因です。

clear プロパティは、他の浮動要素が許可されない要素の側面を指定します。

両方を記述することで、両側で他のフロート要素が許可されていないことを伝えているため、「コンテナ」divの下と外に送信されます

CSS クリア プロパティ

于 2012-07-25T18:09:16.870 に答える