CSS float слева не работает правильно

#css #css-float

Вопрос:

я пытаюсь разделить два divs на две секции, левую и правую. При этом левый является статическим (высота 300 пикселей), а правый не является статическим (например, сообщения и комментарии). С нижним колонтитулом внизу.

 <div>
    <div>
    <div class="right"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div>
    </div>
    <div>
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div>
    </div>

Я сделал свой основной div шириной 760 пикселей, следовательно, с этими настройками у меня все еще есть 10 пикселей в запасе. Проблема сейчас в том, что я не могу назначить float-right для div с правильным классом и могу назначить float-left только для div с левым классом. Я пытался менять div вверх и вниз, переназначая позиции, но то, что я получаю, — это не то, что я хочу. Любая помощь?

Редактировать

 CSS
.right {
font-family: verdana;
font-size: 12px;
border-radius: 3px;
}

.left {
font-family: verdana;
font-size: 10px;
color: #000000;
border-radius: 3px;
}

Это результаты, которые я получаю, которые мне не нужны
введите описание изображения здесь

введите описание изображения здесь

чего я хочу, так это введите описание изображения здесь

1. Пожалуйста, предоставьте более четкое представление о том, как это «не работает правильно». Скриншоты, например.

2. почему вы переносите «левый» и «правый» div в другие div-заполнители. Есть ли у них какая-либо цель.

3. я новичок в программировании, извините, я определяю left и right class как просто класс для div, но присваиваю только style=»float: left;» в <div class=»left»>

Ответ №1:

DIV это блочный элемент, поэтому вы можете дать float или inline-block right div принять его width таким образом:

 .right{float:right}

Редактировать:

ответьте на ваш комментарий ниже

если вы дадите float divs , то вам должно clear its parent понравиться это :

 <div style="overflow:hidden"> 
    <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> 
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> 
</div>

Ответ №2:

вам нужно избавиться от некоторых divs или назначить плавающие родительским divs правых, левых divs.

 <div> 
    <div class="right" style="float: right;"><img src="images/members/bigava/crays.png" style="width: 630px; height: 130px;" /></div> 
    <div class="left" style="float: left;"><img src="images/members/ava/crays.jpg" style="width:120px; height:80px;" /></div> 
    <div class="footer" style="clear: both;"><img src="images/members/ava/crays.jpg" style="width:760px; height:80px;" /></div> 
</div>

это должно сработать.

1. но, назначив float: right , разве это не заставит его перекрывать нижний колонтитул ниже?

2. я обновил свой комментарий, включая нижний колонтитул div. они не перекрываются, если вы используете «очистить: оба»

Ответ №3:

Если вы правильно выполните измерения ширины, вы можете получить этот макет, фактически переместив все влево. Ваш порядок div должен складываться правильно, и он, естественно, будет перемещаться туда, куда вы хотите. У вас больше divs, чем необходимо. Обязательно очистите это.