2011-07-12 47 views
0

私は決してCSSとDivsをうまく扱うことはできません。 3つ目の上に2つのdivを配置する

は基本的に私はこのような何かを作るために探しています:

enter image description here 編集:私が試しクリア:左;何らかの理由で私のbottom-divが他のdivから離れた位置に配置されています。このように:あなたは固定幅で動作することができれば余裕のとあなたのケースのように、境界線の

enter image description here

+0

、 'outline'プロパティでページのレイアウトは多くのことを行うことができます。 –

+0

コードを投稿してください。マージンがあるかもしれません。それには数千の理由が考えられます。 – DanielB

+0

火災によるマージンはありません。 – Brian

答えて

1

CSS

.top 
{ 
    width: %50; 
    float: left; 
} 
.bottom 
{ 
    clear left; 
} 

マークアップあなたの編集に関しては

<div id="containter"> 
    <div class="top">HELLO</div> 
    <div class="top">HELLO</div> 
    <div class="bottom">HELLO</div> 
</div> 
2
<div style="width:50%; float:left">Hello</div> 
<div style="width:50%; float:left">Hello</div> 
<div style="clear:left">Hello</div> 

、私は、知っている必要があります。あなたがアクションでそれを見るためにjsFiddleで見ることができ

<div class="col">Left</div> 
<div class="col right">Right</div> 
<div class="full">Bottom</div> 

CSS

div { 
    border: 1px solid black; 
    padding: 1%; 
    margin-bottom: 2%; 
} 

.col { 
    width: 47%; 
    float: left; 
} 

.right { 
    float: right; 
} 


.full { 
    clear: both; 
} 

編集ここ

パディング、マージンやボーダーを持つ高度なバージョン。

2

浮動divタグとコンテナとの非常に単純:

<div class="columns"> 
    <div class="left"> 
     <!-- left div --> 
    </div> 
    <div class="right"> 
     <!-- right div --> 
    </div> 
</div> 
<div> 
    <!-- bottom div --> 
</div> 

スタイル:

.left { 
    float: left; 
    width: #number#px; 
} 
.right { 
    float: right; 
    width: #number#px; 
} 
.columns { 
    overflow: hidden; 
} 

が、これはあなたに理にかなって願っています。

関連する問題