CSS HTML Div佈局問題

-2

我努力實現乾淨的代碼，同時努力獲得我想要的佈局。CSS HTML Div佈局問題

我的當前代碼不是與其他浮動div在頁面上運行，而底部的文本和按鈕部分不是內聯顯示，而是強制其他元素不在位置。

我試過我的代碼不同rehashings，但找不出它和我在那裏我開始拉我的頭髮了點。

我正在努力實現類似於此線框的佈局 - https://wireframe.cc/UTHU1d。

我已經複製了下面的最新代碼，減去底部的文本和按鈕的div，因爲我一直沒有能夠得到任何地方靠近右邊。

CSS：

.sceneItem { clear:both; display: block; margin: 0 auto; width: 100%; } 
.scenePart { display: block; width: 100%; height: 360px; float: left; } 
.imgLink { margin: 0; position: relative; } 
.largeImage { display: block; width: 648px; height: 360px; float: left; } 
.previewImage { width: 318px; height: 180px; display: block; margin-bottom: 3px; float: left; } 
.previewImage a.imgLink { } 
.img { display: inline; }

和HTML：

<li class="sceneItem"> 

<div class="largeImage scenePart"> 
<a href="" class="imgLink" title=""> 
<img src="24361_01_01.jpg" class="img" alt=""></a> 
</div> 

<div class="previewImage scenePart"> 
<a href="" class="imgLink" title=""> 
<img src="24361_01_01.jpg" class="img" alt=""></a> 
</div> 

<div class="previewImage scenePart"> 
<a href="" class="imgLink" title=""> 
<img src="24361_01_02.jpg" class="img" alt=""></a> 
</div> 

</li>

來源

2014-07-05 Ben

你有沒有考慮使用預先存在的佈局框架，如960.gs或skel.js？沒有重新發明輪子的意義，你可以在5分鐘內創建你的佈局。 – ElendilTheTall

[jsfiddle]（http://jsfiddle.net）具有適當的圖像並解釋它的錯誤可能會有所幫助。 –

所以。出了什麼問題？你只是告訴我們它沒有做的事情。但不是它做的。 –

我猜，如果你的花車互相干擾，你可以嘗試創建一個塊格式化的內容你浮動圖像如下：

.box { 
    width:970px; 
    overflow: auto; 
}

通過這樣做，以下任何元素都不會與浮動圖像進行交互。

注意：如果沒有額外的頁面元素，我不能肯定地說問題是什麼。

來源

2014-07-05 12:32:59

CSS HTML Div佈局問題

回答

相關問題