Выравнивание трех divs

Я хочу, чтобы стиль трех div был таким же, как на следующем рисунке. Как я могу это достичь?Выравнивание трех divs

enter image description here

Я пишу HTML код, как это:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<style type="text/css"> 
#container{ 
background-color:#00ff00; 
width:500px; 
height:500px; 
} 
#leftDiv{ 
background-color:#ff0000; 
width:250px; 
height:500px; 
} 
#rightDiv{ 
background-color:#0000fff; 
widht:250px; 
height:500px; 
} 
#other{ 
background-color:#ffff00; 
widht:500x; 
height:500px; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="leftDiv"> 
</div> 
<div id="rightDiv"> 
<img src="Koala.jpg"> 
</div> 
</div> 
<div id="other"> 
</div> 
</body> 
</html>

Но результат не как мои ожидания, то это представление моего кода: enter image description here

Я хочу поставить изображение во 2-й (правый) div.

Пожалуйста, помогите.

Спасибо.

источник

2012-03-29 Tom

Stackoverflow не может отобразить весь мой html-код. Я понятия не имею, как заставить их отображаться. – Tom

В вашем коде нет технических недостатков. Это всего лишь типографская ошибка. – apnerve

Привет, очень просто изменить на свою таблицу стилей и сделать это.

CSS

.container{ 
background-color:green; width:500px; 
} 

.leftDiv{ 
background-color:red; width:250px; 
height:500px; 
float:left; 
} 

.rightDiv{ 
background-color:pink; width:250px; 
height:500px; 
float:left; 
} 

.other{ 
background-color: #FFFF00; 
height:500px; 
clear:both; 
}

HTML

<div class="container"> 

    <div class="leftDiv">left</div> 
    <div class="rightDiv">right</div> 

    <div class="other">middle</div> 


</div>

и теперь проверить это http://jsfiddle.net/rohitazad/PLdyw/4/

источник

2012-03-29 05:36:23

Использование абсолютной позиции - не лучший подход для выравнивания div. Для лучшего результата вы должны использовать метод float. –

@MuhammadSannanKhalid Вы правы, я обновил свой ответ. –

@azad Это правильно, я использую ваш последний код версии, результат не такой же, как и я, потому что в моем div есть таблицы и другие вещи. Используйте float, он работает сейчас. спасибо всем – Tom

Правило стиля, которое вы написали для #other, неверно напечатано. Он должен быть width, а не widht.

#other{ 
    background-color:#ffff00; 
    widht:500x; /* This should have been 'width'. Resorting to StackOverflow for a typo error? :-o */ 
    height:500px; 
}

PS: Перед публикацией в StackOverflow проверьте свои типографские ошибки. Благодарю.

источник

2012-03-29 05:23:27 apnerve

Спасибо за ваш ответ и извините за типографские ошибки. Но правильная ошибка заклинания не сработала. – Tom

Тогда это может быть из-за ширины изображения. Он может быть шире 250px. Если вы измените 'widht' на' width', он должен работать. Я уже тестировал его (хотя крошечные вещи, подобные этим, не нуждаются ни в каких тестах) – apnerve

попробовать этот CSS.

.container{ 
background-color:green; width:500px; 
height:500px; 
position:relative;} 

.leftDiv{ 
    float:left; 
background-color:red; width:250px; 
height:500px; 
} 

.rightDiv{ 
background-color:pink; width:250px; 
height:500px; 
float:left; 
} 

.other{ 
background-color: #FFFF00; 
    clear:both; 
    width:500px; 
height:500px; 
}

источник

2012-03-29 05:48:21

Выравнивание трех divs

ответ

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