Как я могу расположить некоторые элементы в следующем расположении? - PullRequest
Новая
       7

Как я могу расположить некоторые элементы в следующем расположении?

3 голосов
/ 16 июня 2009

У меня есть основной контейнер div в центре моей веб-страницы. Это уже на месте и содержит различные элементы.

Тем не менее, сейчас я пытаюсь разместить большой div содержимого (Div # 1) слева, который занимает около 70% от Div основного контейнера. Что мне трудно сделать, так это получить правильный CSS-код, чтобы Div # 1, # 2, # 3 и # 4 располагались так, как показано ниже:

alt text

Что мне делать в этом случае для CSS относительно Div # 1 - # 4? Должен ли я плавать Div # 1 слева и установить его в процентах / фиксированной ширине? И плавающие div # 2 - 4 правильно?

Некоторые рекомендации по этому поводу будут оценены!

Ответы [ 2 ]

5 голосов
/ 16 июня 2009

Я бы сказал, что 2 обертки div "left" и "right" плавающие влево с правильными размерами.

Поместите div 1 слева

Поместите div 2, 3 и 4 справа.

Это должно сработать, если нет, дайте мне знать

3 голосов
/ 16 июня 2009

Вот рабочий пример, который может вам помочь: 

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      *{
       margin:0;
       padding:0; 
      }
      .content{
        padding:10px;
        margin-top:50px;
        width:770px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid black;
      }
      .content h1{
        text-align:center; 
      }

      .content h2{
        text-align:center; 
      }

      .content .left{
        width:600px;
        float:left; 
        border:1px solid black;      
      }

      .content .right{
        width:150px;
        float:right;
      }

      .content .right div{        
        margin-bottom:10px; 

        border:1px solid black;
      }
      .content .clear{
        clear:both; 
      }
    </style>
  <body>
    <div class="content">
      <h1>Main Container Div</h1>
      <div class="left">
        <h2>Div #1</h2>
      </div>
      <div class="right"> 
        <div><p>Div #2</p></div>
        <div><p>Div #3</p></div>
        <div><p>Div #4</p></div>
        <div><p>Div #5</p></div>
      </div>
      <div class="clear">&nbsp;</div>
    </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...