調整兩個div？

-1

這裏是一個CSS newb的位。我在Dreamweaver CS6中使用流體網格佈局。我創建了一個headercontainer div，然後是headerleft和headerright div。我向headerleft添加了一個圖像，並在headerright中鍵入了一些文本。我希望能夠讓文本保持與圖像的中心一致，而不考慮流體佈局的大小。調整兩個div？

這樣做的最好方法是什麼？我把兩個頭放在一個容器div中，希望它能夠容易地對齊容器中的兩個div，但我不確定如何實現它。下面的代碼我現在有對頁面的這一部分：

編輯：代碼現在說（但仍然無法正常工作）：

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: 90.5666%; 
    padding-left: 0.2166%; 
    padding-right: 0.2166%; 
} 
#headercontainer { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    display: block; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #FFF; 
    text-align: left; 
} 
#headerleft { 
    clear: both; 
    float: left; 
    margin-left: 0; 
    width: 49.7607%; 
} 
#headerright { 
    clear: none; 
    margin-left: 0.4784%; 
    width: 49.7607%;   
}

和HTML說：

<div class="gridContainer clearfix"> 
    <div id="headercontainer"> 
    <div id="headerright"> 
     <h2>Support For All Your Gadgets &amp; Tech!</h2> 
    </div> 
    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2> 
    </div> 
    </div>

非常感謝！

來源

2013-05-14 Ryan Kennett

可考慮使用CSS浮動的div。一旦你明白我認爲你會發現你的問題很容易解決。我沒有提供答案，因爲現在已經有很多了。 – Swordfish0321 2013-05-14 17:26:08

刪除display:block;從#headerleft和#headerright

而且，你只能在headerleft ID設置float:left;，並在你的HTML代碼中留下一個前把DIV headerright。

來源

2013-05-14 16:15:06 Pouki

嗨，pouki，感謝您的幫助！不幸的是，這不起作用，headerright現在坐在headerleft下方。在設置初始佈局div時，DW將代碼放在那裏。我從headerright中刪除了float：left，並將headerright div放在headercontainer中。這裏是css： – 2013-05-14 16:25:39

凹凸。任何人有任何想法嗎？ – 2013-05-14 17:11:25

試試這個代碼：

.gridContainer { 
    margin-left: auto; 
    margin-right: auto; 
    width: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
} 
#headercontainer { 
    float: left; 
    margin-left: 0; 
    width: 100%; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #FFF; 
    text-align: left; 
    position:relative; 
} 
#headerleft { 
    float: left; 
    margin-left: 0; 
    width: 50%; 
} 
#headerright { 
    clear: none; 
    margin-left: 50%;  
} 


<div class="gridContainer clearfix"> 
    <div id="headercontainer"> 

    <div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2> 
    </div> 
    <div id="headerright"> 
     <h2>Support For All Your Gadgets &amp; Tech!</h2> 
    </div> 
    </div> 
</div>

來源

2013-05-15 05:26:16 Sukhpreet

嗨，感謝您的回覆，這似乎也不起作用。根據我的Dreamweaver副本，它可能與目前不支持嵌套流體div的事實有關。我以前沒有意識到。我設法通過在流體網格中插入一張表，或多或少地獲得我想要的效果。再次感謝你的幫助。 :) – 2013-05-15 22:34:19

調整兩個div？

回答

相關問題