移動DIV及其內容

最大的箱是包含由一個小的空間和文本的兩個小方塊正是每一個下分開的兩個IMGS一個div。

問題是我一直在嘗試（至少5個小時不開玩笑）。

這裏是我的代碼：

CSS：

#divPictures { 
    width: 960px; 
    position: relative; 
    float: left; 
    top: 520px; 
    left: 200px; 
    background: url("../imgs/bg-body.jpg"); 
    margin: 0 0 0 -5px; 
} 

#divPictures img { 
    margin: 0 0 0 10px; 
}

HTML：

<div id="divPictures"> 
    <img src="imgs/help-out.jpg" alt=""> 
    <p>"TEXT HERE</p> 
    <img src="imgs/what-we-do.jpg" alt=""> 
    <p>"AND HERE"</p> 
</div>

編輯：

我無法發佈圖像，但它是一個包含兩個圖像的塊，其中包含兩個圖像，下面是文本。

來源

2014-03-05 Code Grasshopper

好了，有什麼問題呢？ – David

你得到什麼而不是你想要的？ – SWPhantom

我得到的是一件不應該的事情。一個非常恐怖的恐怖。 –

像這樣的東西？簡單的例子，你可以明顯增加額外的CSS，或浮動左，墊/利潤率等...

#divPictures{ 
width: 100%; 
background: url("../imgs/bg-body.jpg"); 
} 

.left{ 
width: 45%; 
float:left; 
} 

.right{ 
width: 45%; 
float:right; 
} 

.left img, .right img{ 
margin: 0 0 0 10px; 
}

HTML：

<div id="divPictures"> 

<div class="left"> 
<img src="imgs/help-out.jpg" alt=""> 
<p>"TEXT HERE</p> 
</div> 

<div class="right"> 
<img src="imgs/what-we-do.jpg" alt=""> 
<p>"AND HERE"</p> 
</div> 

</div>

來源

2014-03-05 23:54:00 MCG

非常感謝！但因爲這種習慣有一些限制，我不能使用％，也不能使用正確和反對等，只有px和邊距。該頁面的寬度是956px，所以我會嘗試對此進行一些調整。 –

結識新的div的圖像，並使用CSS屬性附加傷害display: inline-block到告訴口譯員你想讓你的div排成一行。

<!DOCTYPE html> 
<html> 
<head> 
<!-- CSS --> 
<style> 
div#pic 
{ 
    display: inline-block; 
    width: 200px; 
    background: url("../imgs/bg-body.jpg"); 
    margin: 5px 0 0 -5px; 
} 
div#pic img 
{ 
    margin: 0 0 0 10px; 
} 
</style> 
</head> 
<!-- HTML --> 
<body> 
<div id="divPictures"> 
    <div id="pic"> 
     <img src="imgs/help-out.jpg" alt=""> 
     <p>"TEXT HERE"</p> 
    </div> 
    <div id="pic"> 
     <img src="imgs/what-we-do.jpg" alt=""> 
     <p>"AND HERE"</p> 
    </div> 
</div> 
</body> 
</html>

來源

2014-03-06 00:02:52 Gucu112

這是最簡單的方法...當我卡住我刪除它，並重新開始。我認爲你會從重新開始受益...

CSS

<style> 
.caption{ 
    text-align: center; 
} 
li{ 
    background: #ccd2cd; 
    float: left; 
    margin:5px; 
    list-style: none; 
    padding:5px; 
} 
</style>

HTML

<ul> 
    <li> 
     <img src="http://omarhabash.com/img/feature1.jpg" alt=""> 
     <div class="caption">caption2</div> 
    </li> 

    <li> 
     <img src="http://omarhabash.com/img/feature1.jpg" alt=""> 
     <div class="caption">caption2</div> 
    </li> 
</ul>

，如果你不想使用（LI）列表，則只需更換那些與div類和重命名風格也相同。

我在這裏的方式是一個很好的開始，如果這是你的目標。

http://jsfiddle.net/Mz6aF/

來源

2014-03-06 01:17:10 Omar

移動DIV及其內容

回答

相關問題