Дивы не будут позиционировать правильно.

Я извиняюсь за «нуб» вопрос, но это сводит меня с ума ...Дивы не будут позиционировать правильно.

<div id="footer"> 
     <div id="footer_wrapper"> 
      <div id="project_wrapper"> 
       <div class="footer_image_div project 1"> 
        <p>Axance</p> 
        <img src="/axance/img/upload/small/1336465127.jpg" class="footer_image" alt="" /> 
        <div class="info_div"> 
         <a href="/axance/projects/view/3">Lees meer...</a> 
        </div> 
       </div> 
       <div class="footer_image_div project 2"> 
        <p>Axance</p> 
        <img src="/axance/img/upload/small/1336465159.jpg" class="footer_image" alt="" /> 
        <div class="info_div"> 
         <a href="/axance/projects/view/4">Lees meer...</a> 
        </div> 
       </div> 
       <div class="footer_image_div project 3"> 
        <p>Dit is een test</p> 
        <img src="/axance/img/upload/small/1336481215.png" class="footer_image" alt="" /> 
        <div class="info_div"> 
         <a href="/axance/projects/view/5">Lees meer...</a> 
        </div> 
       </div> 
       <div class="footer_image_div project 4"> 
        <p>Test project</p> 
        <img src="/axance/img/upload/small/1336564574.jpg" class="footer_image" alt="" /> 
        <div class="info_div"> 
         <a href="/axance/projects/view/6">Lees meer...</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

И это таблица стилей:

#footer_wrapper { 
     margin-bottom:auto; 
     margin-left:auto; 
     margin-right:auto; 
     margin-top:auto; 
     width:1000px; 
    } 

#footer_wrapper { 
    margin-bottom:auto; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:auto; 
    width:1000px; 
} 
.project { 
    height:220px; 
    width:270px; 
} 
style.css (line 105) 
.footer_image_div { 
    float:left; 
    padding-left:21.66666666666667px; 
    padding-right:21.66666666666667px; 
}

Теперь то, что я хочу, что все 4 DIVS находятся в project_wrapper (в строке) и отображаются только 3, а другая скрыта вне div. Как мне управлять этим?

Снова извините за вопрос о нуле и длинную информацию.

источник

2012-05-09 Hawiak

Ваша ширина div + поля, которые у вас есть на них, составляют более 1000px и вынуждают последний div на следующую строку (вне div).

, если вы измените ширину .project на:

.project { 
    height:220px; 
    width:200px; 
}

они уместятся на одной линии, как так: http://jsfiddle.net/v57n3/

В качестве альтернативы вы можете адаптировать поля на первой и последней дивы, добавив дополнительные классы. или вы можете уменьшить запас на .footer_image_div

.first{ margin-left:0px;}

или

.last{ margin-right:0px;}

Это объясняет блочную модель. http://www.w3schools.com/css/css_boxmodel.asp

источник

2012-05-09 12:41:04 Ollie

Это приведет к отображая их в обертке дел. Но есть ли способ скрыть другие div (даже если они составляют выше 1000 пикселей) прямо вне div? – Hawiak

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

http://jsfiddle.net/v57n3/2/ вот так – Ollie

ширина всех дивы проекта добавлены вместе больше, чем ширина контейнера

источник

2012-05-09 12:43:23 atmd

Дивы не будут позиционировать правильно.

ответ

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