HTML/CSS: создание и размещение 5 блоков

Я пытаюсь разместить 5 блоков на моей странице.HTML/CSS: создание и размещение 5 блоков

Я хотел бы иметь 3 колонки в самом деле:

Первая колонка: Два блока (Favorites и встречи)
Вторая колонка: (Недавних новости и твиты)
Третья колонка: Другие избранные колонка

Как это:

enter image description here

Но у меня есть проблема с позиционированием третьей колонки.

Вот мой HTML код:

<div class="containerBloc" > 
    <div class="box-1"> 
     <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu"><span id="textMenu">Favorites</span></div> 
    </div> 
    <div class="box-2"> 
     <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_feed.png" id="imgIntoMenu"><span id="textMenu">Recent news</span></div> 
    </div> 
    <div class="box-5"> 
     <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu"><span id="textMenu">Favorites</span></div> 
    </div> 
    <div class="box-3"> 
     <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_calendar_month.png" id="imgIntoMenu"><span id="textMenu">Upcoming meetings</span></div> 
    </div> 
    <div class="box-4"> 
     <div class="box-menu"><img src="src/ui_dashboard/img/ic_action_twitter.png" id="imgIntoMenu"><span id="textMenu">Tweets de</span></div> 
    </div> 
</div>

И CSS:

.containerBloc { 
    max-width: 1200px; 
    margin: 0 auto; 
    overflow: hidden; 
    margin-top: 150px; 
} 
.box-1, .box-2, .box-3, .box-4 { 
    float: left; 
    margin: 1%; 
    min-height: 150px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    background-color: #FFFFFF; 
    border: 1px solid #B0B0B0; 
} 
.box-1, .box-2 { 
    height: 200px; 
} 
.box-1, .box-3 { 
    width: 30%; 
} 
.box-2, .box-4 { 
    width: 60%; 
} 
.box-5 { 
    margin: 1%; 
    min-height: 150px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    background-color: #FFFFFF; 
    border: 1px solid #B0B0B0; 
    float : right; 
    height : 100%; 
    width : 40%; 
} 

.box-menu { 
    background-color: #EFEFEF ; 
    height : 40px; 
    color : #B0B0B0; 
    border-bottom: 1px solid #B0B0B0; 
} 

#imgIntoMenu { 
    margin-left : 10px; 
    margin-top : 4px; 
} 

#textMenu { 
    margin-left: 10px; 
    position: absolute; 
    margin-top: 13px; 
}

Мой полный код здесь: http://jsfiddle.net/mzV85/

Большое спасибо за вашу помощь.

источник

2014-01-02 wawanopoulos

Если вы собираетесь работать со столбцами, почему бы вам не создать 'div' для них? – Broxzier

В чем проблема с третьим блоком? Вам нужно добавить более подробную информацию, чтобы мы могли помочь. – tjons

Вы должны использовать идентификаторы вместо классов. – tjons

Вы действительно должны использовать гибкую сетчатую систему, такую как Bootstrap.

Однако, если я правильно понимаю, вы просто хочет собрать макет в три колонки, как это - http://jsfiddle.net/webbymatt/ngxA6/

<div class="container"> 
    <div class="col-1"> 
    <div class="child"> 
     Favourites 
    </div> 
    <div class="child clearfix"> 
     Meetings 
    </div> 
    </div> 

    <div class="col-2"> 
    <div class="child"> 
     Recent 
    </div> 
    <div class="child clearfix"> 
     Tweets 
    </div> 
    </div> 

    <div class="col-3"> 
    <div class="child"> 
     Favourites 
    </div> 
    </div> 
</div>

источник

2014-01-02 13:50:39

Это FIDDLE вы должны получить going.there некоторая tydying, чтобы сделать в код CSS.

Дело в том, чтобы использовать Divs для обертывания столбцов. Чтобы установить добавленную ширину до 100% и поместить их влево.

HTML:

<div class="containerBloc"> 
    <div class="col"> 
     <div class="box-1"> 
      <div class="box-menu"> 
       <img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu" /> <span id="textMenu">Favorites</span> 

      </div> 
     </div> 
     <div class="box-2"> 
      <div class="box-menu"> 
       <img src="src/ui_dashboard/img/ic_action_feed.png" id="imgIntoMenu" /> <span id="textMenu">Recent news</span> 

      </div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="box-3"> 
      <div class="box-menu"> 
       <img src="src/ui_dashboard/img/ic_action_calendar_month.png" id="imgIntoMenu" /><span id="textMenu">Upcoming meetings</span> 

      </div> 
     </div> 
     <div class="box-4"> 
      <div class="box-menu"> 
       <img src="src/ui_dashboard/img/ic_action_twitter.png" id="imgIntoMenu" /><span id="textMenu">Tweets de @__Erwan</span> 

      </div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="box-5"> 
      <div class="box-menu"> 
       <img src="src/ui_dashboard/img/ic_action_users.png" id="imgIntoMenu" /><span id="textMenu">Favorites</span> 

      </div> 
     </div> 
    </div> 
</div>

CSS:

.col{ 
    float:left; 
    width:33%; 
    margin:0; 
    padding:0; 
} 

.containerBloc { 
    max-width: 1200px; 
    margin: 0 auto; 
    overflow: hidden; 
    margin-top: 150px; 
} 
.box-1, .box-2, .box-3, .box-4 { 
    margin: 1%; 
    min-height: 150px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    background-color: #FFFFFF; 
    border: 1px solid #B0B0B0; 
} 
.box-1, .box-2 { 
    height: 200px; 
} 
.box-1, .box-3 { 
    width: 98%; 
} 
.box-2, .box-4 { 
    width: 98%; 
} 
.box-5 { 
    margin: 1%; 
    min-height: 150px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    background-color: #FFFFFF; 
    border: 1px solid #B0B0B0; 
    float : right; 
    height : 100%; 
    width : 98%; 
} 
.box-menu { 
    background-color: #EFEFEF; 
    height : 40px; 
    color : #B0B0B0; 
    border-bottom: 1px solid #B0B0B0; 
} 
#imgIntoMenu { 
    margin-left : 10px; 
    margin-top : 4px; 
} 
#textMenu { 
    margin-left: 10px; 
    position: absolute; 
    margin-top: 13px; 
}

источник

2014-01-02 13:51:48

Большое спасибо. чтобы иметь третий столбец на одной и той же высоте других столбцов? – wawanopoulos

Это зависит от вашего макета. Если ваши столбцы имеют фиксированную высоту, то это просто с CSS, если нет, тогда JS может понадобиться. –

Проблема: разметка имеет box-1, box-2 и box-5 в одной строке .....вычислить их объединенную ширину, и она приходит> 100%; поэтому ваша третья коробка не выравнивая

увидеть это демоhttp://jsfiddle.net/mzV85/10/ (выровнен коробку в одной строке, не полное проектирование)

.box-1, .box-2 { 
    height: 200px; 
    width:20%; /* do some changes here */ 
} 
.box-1, .box-3 { 
    width: 30%;/* do some changes here */ 
}

Поиграйте с шириной и вы будете получить его в одной строке, когда его общая ширина < = 100%

источник

2014-01-02 13:58:38

компоновка ломает потому что percen ширины тагов, которые вы используете, составляют более 100%. Если вы уменьшите ширину столбцов, она будет работать.

http://jsfiddle.net/mzV85/15/

CSS:

.box-1, .box-3 { 
    width: 25%; 
} 
.box-2, .box-4 { 
    width: 50%; 
} 
.box-5 { 
    width : 19%; 
}

источник

2014-01-02 14:06:17 jfelsinger

сделали скрипку. Пожалуйста, проверьте http://jsfiddle.net/mzV85/21/. Пожалуйста, проверьте надлежащим образом width контейнеров.

источник

2014-01-02 14:08:43 noob

HTML/CSS: создание и размещение 5 блоков

ответ

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