我的网页上有一组图像。我在图像之前附加了一个 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/