Блог

Главная - Вопросы по программированию - позиционирование css с помощью display или float, могу ли я получить эту структуру, используя свойство display

позиционирование css с помощью display или float, могу ли я получить эту структуру, используя свойство display

#css #css-float

#css #css-float

Вопрос:

Учитывая этот HTML:

 <div id="div1">
    <div id="div1a"></div>
    <div id="div1b"></div>
    <div id="div1c"></div>
    <div id="div1d"></div>
</div>
<div id="div2a"></div>

Могу ли я получить эту структуру, используя свойство отображения CSS?

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

1. Какой CSS вы пробовали?

2. Короткий ответ. ДА. Как сказал Джейсон, покажите нам что-нибудь, что вы пробовали.

3. Я попытался сделать ширину div1a равной 1000 пикселей, а остальные divs в div1 200 пикселей, затем все divs внутри div1 плавают влево, а div2aa плавают вправо. bt тогда div2 был не совсем таким, как я показал на изображении, но отсутствовал в div1. Я просто хотел узнать, смогу ли я это сделать

4. На самом деле я пробовал это на firebug и не был уверен, что это можно сделать, поскольку @Blake сказал, что это можно сделать jsfiddle.net/pahnin/m5JtK это мой код и структура, я не знаю, буду ли я использовать float или display, чтобы сделать div2 плавающим. кто-нибудь, пожалуйста, помогите. спасибо.

5. jsfiddle.net/m5JtK/1 использование некоторого позиционирования, и, вероятно, не единственный вариант. Это не идеально, и есть много возможных проблем. Вероятно, вам повезет еще с несколькими разделениями

Ответ №1:

Конечно, это можно сделать с помощью следующего CSS:

 /* Height of the top box.  Change as needed to suit your layout */
#div1a {
  height: 50px;  
}

/* 3 left side boxes.  Again, alter the height/width as needed.  If you change
   the width, you'll need to update the margin-left on #div2a as well. */
#div1b, #div1c, #div1d {
  width: 100px;
  height: 60px;  

  /* This bit causes them to float to the left in a vertical row of boxes */
  float: left;
  clear: both;   
}

/* Increased height of the last box on the left */
#div1d {
  height: 200px;   
}

/* Main content box on the right.  min-height can be changed as needed. 
   The margin makes room for the 3 boxes floating down the left side. 
   You read its properties as margin: top right bottom left; */
#div2a {  
  min-height: 365px;  
  margin: 0 20px 0 140px;   
}

/* Generic margin/padding for all <div>'s */
div {
  margin: 5px;
  padding: 5px;
}

/* Remove the generic margin for #div1 */
#div1 { 
  margin: 0;
}

Демонстрация этого в действии.

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

1. Да, используйте это. Выглядит красиво.

Ответ №2:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
.mask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 100%;
   background-color: #f4f4f4
}
.header{
   float: left;
   width: 100%;
   background-color: #f4f4f4
}
.colleft{
   position: relative;
   width: 100%;
   right: 84%;
   background-color: #f4f4f4
}
.col1{
   position: relative;
   overflow: hidden;
   float: left;
   width: 82%;
   left: 101%;
   background-color: #e6e6e6
}
.col2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 14%;
   left: 3%;
   background-color: #e6e6e6
}
.footer{
   float: left;
   width: 100%;
   background-color: #b4caf7
}
body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
   background-color: #e7e7de
}
</style>
</head>
<body>
<div class="mask">
    <div class="header">
        DIV1A
    </div>
    <div class="colleft">
        <div class="col1">
            DIV2A
        </div>
        <div class="col2">
            <div id="div1b">DIV1B</div>
            <div id="div1c">DIV1C</div>
            <div id="div1d">DIV1D</div>
        </div> 
    </div> 
    <div class="footer">
        footer
    </div>
</div>
</body>
</html>

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

1. Исходя из их вопроса, они хотели использовать только данный HTML, а не дополнительную разметку.

2. да, @Blake прав, я не хочу менять разметку, поскольку я хочу редактировать css существующей темы для prestashop, а не редактировать разметку.