簡體   English   中英

移動div及其內容

[英]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類,然后將樣式重命名為相同的樣式即可。

如果這就是您的目標,那么我在這里擁有它的方式將是一個良好的開始。

http://jsfiddle.net/Mz6aF/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM