Question

正在处理项目，其中我希望我的图像在特定div标签下浮动，在H4标签位于浮动div之外时，在H4标签下相互左下方描述一组特定图像。我想结果显示这样的东西（用.jpg代表图像文件）

    Bar
    bar1.jpg    bar2.jpg    bar3.jpg

   Restaurant
   restaurant1.jpg   restaurant2.jpg    restaurant3.jpg

   Rooms
   room1.jpg    room2.jpg   room3.jpg

但是我得到的结果显示出类似的结果

    Bar
     bar1.jpg   bar2.jpg    bar3.jpg

    Restaurant
    restaurant1.jpg  restaurant2.jpg
    restaurant3.jpg

    Rooms
            room1.jpg   
    room2.jpg   
    room3.jpg

以下是我的代码示例，首先是HTML

  <div id="services">

    <h4>Bar</h4>
    <div class="service">
        <img alt="Service Image" src="bar1.jpg">
        <img alt="Service Image" src="bar2.jpg">
        <img alt="Service Image" src="bar3.jpg">
    </div>

    <h4>Restaurant</h4>
    <div class="service">
        <img alt="Service Image" src="restaurant1.jpg">
        <img alt="Service Image" src="restaurant2.jpg">
        <img alt="Service Image" src="restaurant3.jpg">
    </div>

    <h4>Rooms</h4>
    <div class="service">
        <img alt="Service Image" src="room1.jpg">
        <img alt="Service Image" src="room2.jpg">
        <img alt="Service Image" src="room3.jpg">
    </div>

  </div>

并且这是我的CSS

  div#services {
    margin: 10px;
    padding: 5px;
  }

 div.service {
    float: left;
    margin: 0;
 }

我如何解决这个问题以显示它的用途？

Answer 1

您可以尝试以下代码：

其浮动问题因此在＆＃34; class =＆＃34; service＆＃34;上添加 clearfix 类格。

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

.clearfix {
   display: inline-block;

}

Answer 2

而不是放入float de services类，为什么不放置浮动图像并在每个服务类的末尾添加一个clearfix。

div#services {
  margin: 10px;
  padding: 5px;
}
div.service img {      
  margin: 0;
  margin-right:10px
}

和html

<div class="service">
    <img alt="Service Image" src="http://placehold.it/200x250">
    <img alt="Service Image" src="http://placehold.it/200x250">
    <img alt="Service Image" src="http://placehold.it/200x250">

</div>

继续......这里是一个jsfiddle

http://jsfiddle.net/XGLvf/

Answer 3

just add <div style="clear:both"></div> after service div is over at each time
<div id="services">
<h4>Bar</h4>
<div class="service">
<img alt="Service Image" src="bar1.jpg">
<img alt="Service Image" src="bar2.jpg">
<img alt="Service Image" src="bar3.jpg">
</div>
<div style="clear:both"></div>
<h4>Restaurant</h4>
<div class="service">
<img alt="Service Image" src="restaurant1.jpg">
<img alt="Service Image" src="restaurant2.jpg">
<img alt="Service Image" src="restaurant3.jpg">
</div>
<div style="clear:both"></div>
<h4>Rooms</h4>
<div class="service">
<img alt="Service Image" src="room1.jpg">
<img alt="Service Image" src="room2.jpg">
<img alt="Service Image" src="room3.jpg">
</div>
<div style="clear:both"></div>
</div>

Answer 4

问题是当内容太大时，标签会扩展到多行。要覆盖它，您需要将以下css添加到div.service：

overflow: hidden;
white-space: nowrap;

你需要删除＆＃34; float：left;＆＃34;。你的CSS文件现在应该是这样的：

div#services {
  margin: 10px;
  padding: 5px;
}

div.service {
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}

在div中浮动图像，h4标题未正确显示

4 个答案: