как заставить свойство css floating работать с четырьмя разделами?

#css

Вопрос:

как заставить свойство css floating работать с четырьмя разделами? У меня есть четыре раздела, я хотел бы получить algin, используя макет в качестве примера,

                      div One     - div two
                     div Three   - div Four

Вот что я попытался, используя следующий css и HTML-код, но не выстроился правильно.

       <HTML>
      <HEAD>
      <TITLE>Layout Example</TITLE>
      <link rel="stylesheet" type="text/css" href="file:///C:/app3/css/custom-theme/jquery-ui-1.8.16.custom.css">
      <SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
      <style>
             .divs
             {
                width: 200px;
                height: 200px;
             }
             #one
             {
                background-color: black;
                float: left;
                color: white;
             }
             #two
             {
                background-color: blue;
                float: left;
             }
             #three
             {
                background-color: red;
                float: none;
             }
             #four
             {
                background-color: green;
                float: none;
             }

             </style>
             </HEAD>
             <BODY>
                   <div id="one" class="divs"> One </div>
                   <div id="two" class="divs"> Two</div>
                   <div id="three" class="divs"> Three </div>
                   <div id="four" class="divs"> Four </div>

             </BODY>
             </HTML>

Ответ №1:

Установите для них всех значение float: left и clear: both (или clear: left ) #third элемента.

 .divs
{
   width: 200px;
   height: 200px;
   float: left;
}
#one
{
   background-color: black;
   color: white;
}
#two
{
   background-color: blue;
}
#three
{
   background-color: red;
   clear: both;
}
#four
{
   background-color: green;
}

http://jsfiddle.net/h2DHb/1/

Другой альтернативой может быть создание #container с общим height/width: 400px значением, а затем установка .divs значения height/width: 50% :

 <div id="container">
    <div id="one" class="divs"> One </div>
    <div id="two" class="divs"> Two</div>
    <div id="three" class="divs"> Three </div>
    <div id="four" class="divs"> Four </div>
</div>

#container {
   width: 400px;
   height: 400px;
}
.divs
{
   width: 50%;
   height: 50%;
   float: left;
}
#one
{
   background-color: black;
   color: white;
}
#two
{
   background-color: blue;
}
#three
{
   background-color: red;
   clear: left;
}
#four
{
   background-color: green;
}

http://jsfiddle.net/h2DHb/2/

Ответ №2:

Задайте «ширину» для каждого элемента.

Ответ №3:

Вам нужно использовать clear: right в #two и float: left; в #three и #four . вот исправленный код :

 <HTML>
          <HEAD>
          <TITLE>Layout Example</TITLE>
          <link rel="stylesheet" type="text/css" href="file:///C:/app3/css/custom-theme/jquery-ui-1.8.16.custom.css">
          <SCRIPT type="text/javascript" src="jquery-1.6.2.min.js"></SCRIPT>
          <style>
                 .divs
                 {
                    width: 200px;
                    height: 200px;
                 }
                 #one
                 {
                    background-color: black;
                    float: left;
                    color: white;
                 }
                 #two
                 {
                    background-color: blue;
                    float: left;                    
                 }
                 #three
                 {
                    background-color: red;
                    float: left;
                    clear: both;
                 }
                 #four
                 {
                    background-color: green;
                    float: left;
                 }

                 </style>
                 </HEAD>
                 <BODY>
                       <div id="one" class="divs"> One </div>
                       <div id="two" class="divs"> Two</div>
                       <div id="three" class="divs"> Three </div>
                       <div id="four" class="divs"> Four </div>

                 </BODY>
                 </HTML>

1. Это float: left выглядит немного повторяющимся. Вы уверены, что у вас есть clear на правильном элементе?

2. да, вы правы, float: left выглядит повторяющимся, но есть ли какие-либо проблемы с clear: right ?

3. я не уверен, но я думаю, что оба делают то же самое. Я хочу, чтобы справа от #two не существовало div аналогично, вы хотите, чтобы слева от #three не существовало div. Есть ли в этом какое-либо преимущество?

4. Взгляните на первую скрипку в моем ответе.

5. А затем посмотрите на это: jsfiddle.net/h2DHb/3 (и на самом деле это должно быть clear: left или clear: both ).