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

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

Код ниже:

<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>

источник

2009-08-23 FurtiveFelon

Посмотрите, что произойдет, если вы добавите '* {border: solid 1px black}' в свой стиль. – voyager

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

<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>

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

источник

2009-08-23 19:59:43 voyager

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

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

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

Добавить «Поплавок: левый» стили в «.main»

.main{ 
    ... 
    float:left; 
}

Пожалуйста, обратите внимание, что у вас есть опечатка в вашем втором примере. Фоновый цвет должен быть «#ccc» вместо «ccc».

источник

2009-08-23 21:51:10

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

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

.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; 
}

источник

2009-08-23 23:20:32 Aziz

Добавление поплавком: слева в .main будет исправить.

Загрузите firefox addon или Firebug ColorZilla, и вы увидите, что происходит. Ваша .handle плавает слева внутри вашего .main, поэтому фон #ccc.

источник

2009-08-23 23:35:54 Martin

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

ответ

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