html - 带有文本的 Div 移动其他元素

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

这是您要找的吗？

演示

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;
}