Проблема со слоями

Foxter · July 31, 2012

Помогите реализовать следующее.

Есть два div'а всплывающих влево, у левого дива фиксированная ширина и высота, правый div растягивается в зависимости о количества текста в нём. Я реализовал это так:

HTML:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title> Test Page </title>
</head>
<body>

	<div class="firstbox">
	</div>

	<div class="secondbox">
			ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ ТЕСТ
	</div>

</body>
</html>

CSS:


.firstbox {
	float: left;
	width: 300px;
	height: 400px;
	background-color: #800000;
}

.secondbox {
	float: left;
	background-color: orange;
}

Проблема в том, что когда первая строка текста начинает упираться в правую сторону экрана, вместо того чтобы начать отображать текст в следующей строке, второй div (содержащий текст) перескакивает под первый. Как сделать чтобы это не происходило и второй слой оставался на месте?

Modestes · July 31, 2012

убрать float:left; у .secondbox

Foxter · July 31, 2012

убрать float:left; у .secondbox

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

Modestes · July 31, 2012

один из вариантов



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title> Test Page </title>
<style>
   body {
    color: #000; 
    background: #fff; 
    margin: 0; 
   }
   .firstbox {
    width: 80%; 
    background: #eee; 
    height: 300px; 
    float: right; 
   }
   .secondbox {
    height: 300px; 
    background: #0fc; 
    margin-right: 80%; 
   }

</style>
</head>
<body>
<div>

   <div class="firstbox">Контент</div>
   <div class="secondbox">Меню</div>

</body>
</html>

если левая колонка должна быть фикс то можно заменить на это


   .firstbox {
    background: #eee; 
    height: 300px; 
    margin-left: 250px; 
   }
   .secondbox {
    width: 250px; 
    height: 300px; 
    background: #0fc; 
    float: left; 
   }

Edited July 31, 2012 by Modestes

USF · July 31, 2012

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

overflow:hidden для правого блока

Foxter · July 31, 2012

один из вариантов

Правый div не должен иметь фиксированную величину, он должен растягиваться, в зависимости от количества контента в нём.

Мудрёная задача, ага.

Edited July 31, 2012 by Foxter

USF · July 31, 2012

Мудрёная задача, ага.

я повторю, очистите обтекание правого блока через overflow:hidden и все будет нормально

UPD: http://jsfiddle.net/6Up4L/4/ вуаля

Edited July 31, 2012 by USF

Foxter · July 31, 2012

Мудрёная задача, ага.
я повторю, очистите обтекание правого блока через overflow:hidden и все будет нормально
UPD: http://jsfiddle.net/6Up4L/4/ вуаля

Огромное спасибо!

Foxter · July 31, 2012

Блин, всё равно не понимаю почему в данному случае нужно свойство overflow, если оно "управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров", но у моего div'а ведь не указаны размеры, он резиновый. И вообще, почему данное свойство не позволяет браузеру размещать текст под первым слоем? Не понимаю логики.

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

USF · July 31, 2012

это своеобраный трюк. свойство overflow указывает блок пересчитать свои фактические размеры. с таким же успехом работал бы и overflow: auto. Когда 1 блок становится плавающим то он покидает общий поток. Соседний блок(правый) располагает так, словно плавающий блок внутри него(поставьте правому блоку границу и увидите).

Foxter · July 31, 2012

Соседний блок(правый) располагает так, словно плавающий блок внутри него(поставьте правому блоку границу и увидите).

Вот меня и смутило, что при указании свойства overflow, правый блок, который должен начинаться от левой стороны экрана и быть частично перекрыт первым слоем, стал отображаться будто бы он тоже с "float: left": левая кромка слоя стала начинаться не от левой стороны экрана а от правой стороны первого, плавающего слоя (извиняюсь за тавтологию), что в общем-то прекрасно видно тут. Магия какая-то. :unsure:

Sign In

Проблема со слоями

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information