Question

我的网页上有一组图片。我在图像之前附加了一个div，它将显示有关照片的一些信息。我移动div以符合我的规格，但问题是图像也向右移动以适应我的文本中的字符数。还应注意，在估计每个图像的宽度和高度时涉及PHP代码。添加或删除任何标签或类/ ID会使代码搞乱。我现在在做什么都迷失了。

HTML部分

<div id="tube">
  <div class="part_1">
    <div class="text">wed  dfasdfasd  sda asd  sa asd </div>
        <img class="image_section_1"  src="https://encrypted-tbn3.google.com

        /images?q=tbn:ANd9GcRGr-DN5J2NpvVMVBcu-MgRFkN3S5CCpZ-H6OGxDLoNwNrYM9k3HQ" />

    <div class="text">wed  dfasdfasd  sda asd  sa asd </div>
        <img class="image_section_2"  src="https://encrypted-tbn3.google.com

        /images?q=tbn:ANd9GcRGr-DN5J2NpvVMVBcu-MgRFkN3S5CCpZ-H6OGxDLoNwNrYM9k3HQ" />
  </div>
</div>

这是CSS

*{border:1px solid grey; padding: 0; margin: 0;}

html { background-color: whitesmoke; height: 100%; width:500%;}

#tube {  height: 100%; margin-top: 50px; padding-left: 10px;}

.part_1 {height: 44%; width: 100%;  }

#tube img {border-radius:5px; padding: 7px; background-color: white; padding-bottom: 

35px; border:1px solid grey; margin: 5px; box-shadow: 1px 1px 3px black;}

.image_section_1 {width: 5.4%; height: 67%;margin-right: 25px;}

.image_section_2 {width: 5.4%; height: 67%;margin-right: 25px;}

.text {display: inline; width: 100px; position: relative; left: 250px; bottom: 25px; 

overflow: hidden;  }*{border:1px solid grey; padding: 0; margin: 0;}

我还创建了一个jfiddle示例。正如您所看到的，我希望图像彼此对齐，并使左图像距左边框仅几个像素。 http://jsfiddle.net/7xxxw/4/

Answer 1

将图片和文字放在同一<div>内，并将该位置应用于<div>。在图像后添加文本。

Answer 2

这是你要找的吗？

样本

JSFiddle

HTML

<div id="tube">
    <div class="part_1">
        <div class="image">
            <img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcRGr-DN5J2NpvVMVBcu-MgRFkN3S5CCpZ-H6OGxDLoNwNrYM9k3HQ">
            <p class="legend">wed  dfasdfasd  sda asd  sa asd</p>
        </div>
    </div>
</div>

CSS

html { background-color: whitesmoke; height: 100%; width:500%;}

#tube {height: 100%; margin-top: 50px; padding-left: 10px;}

.part_1 {height: 44%; width: 100%;  }

.image {
    display: inline-block;
    margin: 5px;
    padding: 7px 7px 35px;
    background-color: white;
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 1px 1px 3px black;
    overflow: auto;
    text-align: center;
}

.legend {
    padding: 0;
    margin: 0;
}

Div与文本移动其他元素

2 个答案:

样本

HTML

CSS