Блог

Главная - Вопросы по программированию - плавающие изображения в div с неправильным отображением заголовка h4

плавающие изображения в div с неправильным отображением заголовка h4

#html #css

#HTML #css

Вопрос:

Я работаю над проектом, в котором я хочу, чтобы мои изображения под определенным тегом div перемещались слева друг от друга под тегом H4, описывающим определенный набор изображений, когда тег H4 находится за пределами плавающего div. Я хочу, чтобы результаты показывали что-то вроде этого (с .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;
 }

Как я могу решить эту проблему, чтобы отобразить ее так, как нужно?

Комментарии:

1. Я не вижу ситуации, которую вы описываете, основываясь на опубликованном вами коде.

2. Почему float div.service ? Просто удалите значение с плавающей точкой.

3. чувак, сначала изучи html, css

Ответ №1:

Вы можете попробовать приведенный ниже код:

Это плавающая проблема, поэтому добавьте класс clearfix в div «class =»service».

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

.clearfix {
   display: inline-block;

}

Ответ №2:

 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>

Ответ №3:

Проблема в том, что теги расширяются на несколько строк, когда их содержимое слишком велико. Чтобы переопределить это, вам необходимо добавить следующий css в ваш div.service:

 overflow: hidden;
white-space: nowrap;

и вам нужно удалить «float: left;».Теперь ваш файл CSS должен выглядеть следующим образом:

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

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

Ответ №4:

вместо того, чтобы помещать класс служб с плавающей запятой, почему бы не поместить изображение с плавающей запятой и добавить 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/

Комментарии:

1. Зачем вам float img вообще нужен s??