Question

我想做以下事情：

最大的Box是一个包含两个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>

编辑：

我无法发布图片，但是是一个包含两个图像的块，一个在另一个旁边，文本在下面。

Answer 1

这样的东西？快速举例，你可以显然添加额外的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>

Answer 2

为图片创建新的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>

Answer 3

这是最简单的方法......当我被卡住时，我将其删除并重新开始。我想你会从重新开始受益...

<强> 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/

移动div及其内容

3 个答案: