[英]Moving div around and its content
我要執行以下操作:
最大的Box是一個div,其中包含兩個img,每個img之間用一個小空格隔開,並且每個正好在下面兩個小文本塊。
問題是我已經嘗試了至少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>
編輯:
我無法發布圖片,但它是一個包含兩個圖片的塊,一個圖片彼此相鄰,下面是文本。
像這樣嗎 簡單的例子,您顯然可以添加額外的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>
為圖像創建新的div並使用css atribute 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>
這是最簡單的方法...當我卡住時,將其刪除並重新開始。 我認為您將從重新開始中受益...
的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類,然后將樣式重命名為相同的樣式即可。
如果這就是您的目標,那么我在這里擁有它的方式將是一個良好的開始。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.