Как перенести этот div с помощью CSS в чистом виде?

-1

Я делаю некоторые CSS и я отправил результат там:Как перенести этот div с помощью CSS в чистом виде?

http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/419882_389321854411184_131327856877253_1629934_584123648_n.jpg

Я хотел бы, чтобы переместить немного оранжевый и серый Див-х так, что это прямо под синей.

Я знаю, что могу использовать положение: абсолютное и перемещать div везде, где захочу, но это, очевидно, не самый лучший способ сделать это.

Как мне это сделать?

Вот CSS код для этих 5 дивы:

#alldivs { 
     width: 700px; margin: 0 auto; position: absolute; padding: 30px; 
    } 

    #green { 
     width: 400px; height: 350px; margin: 0px; float: left; background: green; 
    } 

    #blue { width: 300px; height: 250px; margin: 0px; float: right; background: blue; 
      }  

    #red { width: 400px; height: 200px; margin: 0px; float: left; background: red; 
    } 

    #orange { 
     width: 300px; height: 100px; float: right; background:orange; 
    } 

    #grey { 
     width:300px; height:200px; float:right; background:grey; 
    }

Большое спасибо

источник

2012-03-06 eric01

Вы можете разместить свой html? – Colleen

Не изменять CSS, оберните синий и оранжевый DIV; Ваш HTML может быть:

<div id="alldivs"> 
    <div id="green"></div> 
    <div> 
     <div id="blue"></div> 
     <div id="orange"></div> 
    </div> 
    <div id="red"></div> 
    <div id="grey"></div> 
</div>

Также см this example.

источник

2012-03-06 07:01:40 scessor

Привет, сэр, большое спасибо за ваш ответ. Это именно то, что я искал. С уважением – eric01

На моем телефоне, так что я не могу проверить это ...

Добавить поплавок прямо на синий, серый и оранжевый. И ясно, что серый и оранжевый. Поплавок остается зеленым и красным. Рыжие ясно оставил

UPDATE

Ладно здесь я идти. Эта разметка позволит вам быть гибкими с вашим css.

<html> 
<head> 
    <style> 
     * { 
      margin: 0; 
      padding: 0; 
     } 

     .wrapper { 
      margin: 0 auto; 
      width: 700px; 
     } 

     .col_1 { 
      float: left; 
      width: 400px; 
     } 

     .col_2 { 
      float: right; 
      width: 300px; 
     } 

     .green { 
      height: 350px; 
      background: green; 
     } 

     .red { 
      height: 200px; 
      background: red; 
     } 

     .blue { 
      height: 250px; 
      background: blue; 
     } 

     .orange { 
      height: 100px; 
      background: orange; 
     } 

     .grey { 
      height: 200px; 
      background: grey; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="col_1"> 
      <div class="green"></div> 
      <div class="red"></div> 
     </div> 
     <div class="col_2"> 
      <div class="blue"></div> 
      <div class="orange"></div> 
      <div class="grey"></div> 
     </div> 
    </div> 
</body> 
</html>

источник

2012-03-06 07:02:54 jjNford

Привет jjNford, спасибо за ваш ответ. Я пробовал свой путь, но у меня все еще была такая же проблема. Пользовательский скупщик предложил изменить html, и он сработал. Я также узнал, что если размеры div зеленого = синего + оранжевого, вам нужно только изменить порядок div в html. Если размеры не совпадают, то способ счётчика работает все время – eric01

@ eric01 приятно слышать, как я уже сказал, я был на своем телефоне: P haha Я просто посмотрел на вашу ссылку и то, что читал то, что вы пытались сделать. Не видел, чтобы посмотреть через ваш источник, извините, планировал обновить ответ сегодня, чтобы помочь вам, но похоже, что проблема решена. – jjNford

@ eric01 обновленный ответ ... отлично работает – jjNford

Как перенести этот div с помощью CSS в чистом виде?

ответ

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