позиционирование трех элементов в div - PullRequest
Новая
       33

позиционирование трех элементов в div

0 голосов
/ 23 августа 2009

Моя проблема проиллюстрирована в примере кода, приведенном в конце. По сути, у меня есть контейнер div, содержащий некоторые инструменты слева, основное содержимое посередине и несколько инструментов справа (визуальный левый инструмент - для перетаскивания, а визуальный - для удаления контента). Я достиг положения, плавая влево и вправо соответственно, однако, если я наложил цвет фона на основное содержимое, окраска переместится на материал, плавающий слева, но не справа (в настоящее время тестируется только в Firefox 3.5)

Код ниже: 

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    .delete{
        float:right;
    }
    .main{
        width:450;
        background-color:ccc;
    }
    </style>
</head>
<div id="container">
<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as asd fasd fas dfa sdf asdf as dfas df dasf asd fas df asdf asdf asd fasd fasdf asdf asdf asdf as df asdf asdf asd fas df asdpf asdf asdf asd fas dfa sdf asdf asd fas df</p></div>

<div class="c"><p class="handle">HH</p><p class="delete">X</p><p class="main">Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>

Ответы [ 4 ]

0 голосов
/ 24 августа 2009

Добавление float: слева от .main это исправит.

Скачайте ColorZilla аддон Firefox или Firebug, и вы увидите, что происходит. Ваш .handle находится внутри вашего .main, поэтому фон имеет вид # ccc.

0 голосов
/ 24 августа 2009

Если вы намереваетесь предоставить цвет фона только для элемента, обозначенного классом ".main", вам нужно будет внести следующие изменения в разметку HTML и CSS:

Переместите элемент, обозначенный классом "main", между теми, которые отмечены как "handle" и "delete". 

<div class="c">
<p class="handle">...</p>
<p class="main">...</p>
<p class="delete">...</p>
</div>

Добавить "float: left" к стилям в ".main" 

.main{
  ...
  float:left;
}

Обратите внимание, что у вас есть опечатка во втором примере. Цвет фона должен быть "#ccc" вместо "ccc".

0 голосов
/ 24 августа 2009

Не ясно, хотите ли вы, чтобы цвет покрывал их все (левый, основной и правый) .. или только средний делитель.

В любом случае .. если вы хотите, чтобы он покрывал все .. вам нужно, чтобы ширина основного элемента была равна ширине контейнера .. попробуйте это, например 

 .main{
     width:500;
     background-color:ccc;
 }

с другой стороны, если вы хотите, чтобы цвет был только в главном div, то вы должны сделать его плавающим влево .. как-то так 

.handle{
    float:left;
    clear: left;
}
.delete{
    float:right;
    clear: right;
}
.main{
    width:450;
    background-color:ccc;
    float: left;
}
0 голосов
/ 23 августа 2009

Я мог бы получить то, что вы хотите с 

<style type="text/css">
*{border:solid 1px black}
#container{
    width:500px;
}
.handle{
    float:left;
}
.delete{
    position:relative;
    right:50px;
    float:right;
}
.main{
    width:390px;
    padding:9px 30px;
    background-color:ccc;
}
</style>

Но это далеко не хорошо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...