Как исправить плавающий div внутри другого div?

Я действительно не знаю, как это выразить словами, но у меня есть фотографии, которые вполне могут дать вам представление о моей проблеме. Похоже, поплавок дает мне проблему/Как исправить плавающий div внутри другого div?

Это то, что я пытаюсь сделать:

Это моя проблема:

Вот код:

body { 
 
    background: #C52C2C; 
 
} 
 
.images div { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    float: left; 
 
    margin: 2px; 
 
} 
 
#portfolio { 
 
    overflow: auto; 
 
    clear: both; 
 
    heigth: 400px; 
 
    background-color: #c62828; 
 
}

<div class="images"> 
 
    <!-- Top Boxes --> 
 
    <div class="box-1 left"></div> 
 
    <div class="box-2 left"></div> 
 
    <div class="box-3 left"></div> 
 
    <!-- Bottom Boxes --> 
 
    <div class="box-4 left"></div> 
 
    <div class="box-5 left"></div> 
 
    <div class="box-6 left"></div> 
 
</div>

Что я хотел бы сделать, это изменить высоту раздела портфеля, но когда я меняю высоту, ничего не меняется. Если я удалю боксы, то могу изменить высоту. Как я могу это исправить?

Спасибо, если вы хорошо это понимаете.

источник

2016-01-25 Jesse Zambrano

Там нет ДИВ с 'ид =«портфель»' – YounesM

зависимости от того, браузеры, которые вы хотите поддержать, рекомендуем посмотреть в flexbox. –

Код, который вы опубликовали, слишком минимален. Нет '# portfolio' – Oriol

-1

использовать это: clearfix

Проблема здесь состоит в том, что ваш контейнер не берет высоту внутренних коробок в рассмотрении, так что если вы добавляете clearfix к нему, что будет делать трюк

источник

2016-01-25 00:48:29

У него уже есть 'overflow: auto' на своем div – YounesM

Вы правы. моя вина. –

Это из-за неправильного значения свойства display для элемента View More. Вы должны установить следующее:

view_more{ display: block; } // Please replace **view_more** with the correct value to select the element

Также сделайте это для стрелки вниз.

источник

2016-01-25 01:08:35 Trix

Вы имеете в виду что-то вроде этого?
https://jsfiddle.net/xsjjo654/1/

Пример кода:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      body, html { 
       margin: 0; 
       padding: 0; 
       height: 100%; 
       width: 100%; 
       font-family: sans-serif; 
      } 

      h1.title { 
       text-align: center; 
       color: white; 
       font-size: 40pt; 
       margin: 5px auto; 
      } 

      #portfolio { 
       overflow: auto; 
       clear: both; 
       min-height: 400px; 
       width: 100%; 
       background-color: #c62828; 
       text-align: center; 
      } 

      #portfolio > .wrapper { 
       display: table; 
       width: 100%; 
      } 

      #portfolio > .wrapper > section { 
       display: table-cell; 
       vertical-align: middle; 
      } 

      section.side-left { 
       text-align: right; 
      } 

      section.side-right { 
       text-align: left; 
      } 

      section.side-center { 
       width: 930px; 
      } 

      .images { 
       display: inline-block; 
      } 

      .images .box { 
       width: 300px; 
       height: 300px; 
       background-color: white; 
       display: inline-block; 
       float: left; 
       margin: 1px; 
      } 

      .button { 
       cursor: pointer; 
       background: transparent; 
       outline: 0; 
       border: none; 
      } 

      .button.round, .button.round-alt { 
       border-radius: 50%; 
       width: 40px; 
       height: 40px; 
       font-size: 30px; 
      } 

      .button.round { 
       background-color: white; 
       color: #c62828; 
      } 

      .button.round-alt { 
       border: 2px solid white; 
       color: white; 
       margin: 30px; 
      } 

      .button.square { 
       border: 2px solid white; 
       color: white; 
       font-size: 14pt; 
       padding: 12px 30px; 
       margin: 40px auto; 
      } 

      /* (c) 2016 [email protected], www.Refoua.me */ 
     </style> 
    </head> 

    <body> 
     <div id="portfolio"> 
      <h1 class="title"> 
       Portfolio 
      </h1> 
      <div class="wrapper"> 
       <section class="side-left"> 
        <button class="button round prev"> 
        &larr; 
        </button> 
       </section> 
       <section class="side-center"> 
        <div class="images"> 
         <!-- Top Boxes --> 
         <div class="box"></div> 
         <div class="box"></div> 
         <div class="box"></div> 
         <br> 
         <!-- Bottom Boxes --> 
         <div class="box"></div> 
         <div class="box"></div> 
         <div class="box"></div> 
        </div> 
       </section> 
       <section class="side-right"> 
        <button class="button round prev"> 
        &rarr; 
        </button> 
       </section> 
      </div> 
      <button class="button square more"> 
       View More... 
      </button> 
      <br> 
      <button class="button round-alt down"> 
       &darr; 
      </button> 
     </div> 
    </body>

источник

2016-01-25 01:32:30

Это прекрасно, спасибо! –

@JesseZambrano Добро пожаловать! Возможно, подумайте о том, чтобы выставить его и обозначить как «принятый ответ», чтобы другие в будущем могли его использовать? –

Попробуйте Bootstrap. Это позволит вам поиграть с какой-то классной сеткой, и это ОТВЕТ!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
      rel="stylesheet"> 
       <style> 
        .inner { 
           height:350px; 
           background-color:white; 
           margin-top:5px; 
           margin-left:-25px;} 
        body {background-color:red;} 
       </style> 
      <body> 


      <div class='container'> 
       <div class='row'> 
        <div class='col-md-4'> 
          <div class='inner'></div> 
          <div class='inner'></div> 
       </div> 

       <div class='row'> 
        <div class='col-md-4'> 
          <div class='inner'></div> 
          <div class='inner'></div> 
       </div> 

       <div class='row'> 
        <div class='col-md-4'> 
          <div class='inner'></div> 
          <div class='inner'></div> 
       </div> 
      </div> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/ 
3.3.6/js/bootstrap.min.js"> </script>

Выход: http://s28.postimg.org/9y69346tp/test.png Вы можете добавить несколько строк позже, если вы собираетесь обновить свои снимки из базы данных автоматически.

Надеюсь, что это поможет! Ура!

источник

2016-01-25 01:43:13 Bishop

если вы даете ширину к изображениям и края: авто должно центрировать гораздо проще :)

body { 
 
    background: #C52C2C; 
 
} 
 
.images { 
 
    width:912px; 
 
    margin:auto; 
 
    } 
 
.images div { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    float: left; 
 
    margin: 2px; 
 
} 
 
#portfolio { 
 
    overflow: auto; 
 
    clear: both; 
 
    heigth: 400px; 
 
    background-color: #c62828; 
 
}

<div class="images"> 
 
    <!-- Top Boxes --> 
 
    <div class="box-1 left"></div> 
 
    <div class="box-2 left"></div> 
 
    <div class="box-3 left"></div> 
 
    <!-- Bottom Boxes --> 
 
    <div class="box-4 left"></div> 
 
    <div class="box-5 left"></div> 
 
    <div class="box-6 left"></div> 
 
</div>

источник

2016-01-25 01:49:42

Как исправить плавающий div внутри другого div?

ответ

Смежные вопросы