Question

我正在尝试将页眉和段落与页面上的图像对齐，但我很难这样做。我想要两行，每行都有一张图片和我上面列出的内容。

这是我想要的格式，但我似乎无法获得图片旁边的文字。这是代码：

h5 {
	font-family:'Muli', sans-serif;
	font-size:26px;
	color:#00ffff;
}
p.par {
	font-family:sans-serif;
	font-size:14px;
	color:#030303;
}
.sample {
	width:250px;
	height:250px;
	
}
#bodywrap {
	width:1400px;
	margin:0 auto;
	clear:both;
}
#firstrow, #secondrow {
	width:600px;
	float:left;
	margin:50px;
}

<div id="bodywrap">
  <div id="firstrow">
    <a href="gallery.html"><img src="sample1" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
    <a href="gallery.html"><img src="sample2" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
  </div>
  <div id="secondrow">
    <a href="gallery.html"><img src="sample3" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
    <a href="gallery.html"><img src="sample4" alt="Go To Gallery" class="sample"></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
  </div>	
</div>

感谢任何帮助或建议。

Answer 1

我会将每个内容部分包装在一个容器中（如果你选择调整东西，你将有更多的控制权）并将你的a标签（因为它们包裹你的图像）浮动到左边：< / p>

<强> HTML

<div id="bodywrap">
  <div id="firstrow">
    <div class="wrapper">
        <a href="gallery.html"><img src="sample1" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
        </div>
    <div class="wrapper">
        <a href="gallery.html"><img src="sample2" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
      </div>
  <div id="secondrow">
    <div class="wrapper">
        <a href="gallery.html"><img src="sample3" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
    <div class="wrapper">
        <a href="gallery.html"><img src="sample4" alt="Go To Gallery" class="sample"/></a>
    <h5>Pictures</h5>
    <p class="par">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat."
    </p>
      </div>
      </div>    
</div>

<强> CSS

h5 {
   font-family:'Muli', sans-serif;
   font-size:26px;
   color:#00ffff;
   padding: 0; //clear default
   margin: 0; //clear default
}

.wrapper{ 
   overflow: hidden; //clears the float
   margin-bottom: 20px;
}

a{
   float: left;
   margin-right: 15px;
}

FIDDLE

需要将文本与Div内的图像对齐

1 个答案: