как предотвратить разрыв блока

WalkMan · November 3, 2011

Привет

есть такой код


<div class="over_hidden">
	<div class="float_left">
		<div class="border float_left">
			  <table>
			  </table>
		</div>
		<div class="some_text">
                      vcvxcvxcvxcvxcvxc sdfsd f sfs fsd fd sfs dfsd f sdf sdf sdf sdf sdf sdfs f dsad ad asdasdsadsadsadsa 
                      dasdadasd asdsadasdasd fsfsdfsdf sfsdfsdfsdf fsfdsfsdf sdfsdfsd vxcv
                </div>
	</div>
</div>

у таблицы width: auto

если нет блока div.some_text

то div.border оборачивает таблицу по содержимому и не растгиваеться на всю ширину

если добавить блок с текстом то он растяшиваеться на 100% div.over_hidden

примерная схема проблемы что описал выше

http://d.pr/2p5y

как это можно побороть?

resoursa · November 3, 2011

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

WalkMan · November 3, 2011

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
<div style="overflow: hidden">
	<div style="float: left; background: #eee">
    	<div style="float: left; border: 1px solid #000; padding: 5px;">
        	<table>
        		<tr>
        			<td>dsfsfsd  sdf sfsdsfsfsf f sfsdf</td>
        			<td>sdfsdfs f sdfs fsdfsd sdf </td>
        		</tr>
        		<tr>
        			<td> dfsfsfsf sf sf  fs  fsf</td>
        			<td>dsfsfsdfsdfsf dsdfsdf</td>
        		</tr>
        	</table>
		</div>
		<div style="clear: left; border: 1px solid #000; padding: 10px;">
        	<ol>
            	<li> fggdg dg gd dfgdfg fdgd gdgd dgd g dgdg dfg dg gd dg dgdg dgdg </li>
            	<li> fggdg dg gd dfgdfg fdgd gdgd dgd g dgdg dfg dgdfgfgdfg dfg dgdfg gd dg dgdg dgdg </li>
            	<li> fggdg dg gdd g dgdg dfg dg gd dg dgdg dgdg </li>
            	<li> fggdg dg gd dfgdfg fdgd gdgd dgddfgdfgdfg dgd fgdfgdgdfg g dgdg dfg dg gd dg dgdg dgdg </li>
            	<li> fggdg dg gd dfgdfg fdgd gdgd dgfgdfggsg sgg dfgdgd g dgdg dfg dg gd dg dgdg dgdg </li>
			</ol>
		</div>
	</div>
</div>
</body>
</html>

ну вот

както так

надо что бы серый блок не растягивался нижним списком а был по ширине как верхний блок

Edited November 3, 2011 by WalkMan

zSpx · November 3, 2011

Задать максимальный размер родителю или растягивать таблицу.

Список - это блочный элемент, в нормальном состоянии он всегда будет растягиваться на всю ширину родителя. Ну можно ему в % ширину задать, но зачем это нужно? Или я не правильно понял?

WalkMan · November 3, 2011

Задать максимальный размер родителю или растягивать таблицу.
Список - это блочный элемент, в нормальном состоянии он всегда будет растягиваться на всю ширину родителя. Ну можно ему в % ширину задать, но зачем это нужно? Или я не правильно понял?

наверное не правильно понял

макс размер и растягивание таблицы не решение

да список блочный

но можно и inline-block прописать но это в данном случае не решило проблемы

zSpx · November 3, 2011

Вам div.border нужно что бы был всегда растянутый? Ну тогда снимите с него float:left или задайте ширину 100%. И зачем вам столько флоатов?

Edited November 3, 2011 by zSpx

WalkMan · November 3, 2011

да нет

мне надо что бы <div style="float: left; background: #eee">

имел ширину блока <div style="float: left; border: 1px solid #000; padding: 5px;">

который в свою очередь обварачивает сожержимое таблицы

но блок с списком растягивает <div style="float: left; background: #eee"> на 100%

а должен быть по ширине равным первому

WalkMan · November 3, 2011

ау, светлые разумы верстки

неужели ни кто не сталкивался с подобной задачей в своей практике

SelenIT · November 3, 2011

Т.е. нужно ограничить ширину всей конструкции шириной таблицы, которая, в свою очередь, имеет размер по содержимому?

Честно говоря, с трудом представляю, где такая задача может понадобиться. Обычно, если дается простор содержимому, то всему (для красоты можно таблицу растянуть по ширине нижнего блока), если задается ограничение — тоже всему (поставить разумную цифру в % или em и поджимать весь контейнер до нее). Единственный способ зафиксировать ширину блока по соседу, который приходит на ум — задать ему абс. позиционирования + left + right (типа такого), но это безвозвратно вырывает его из потока...

WalkMan · November 3, 2011

ну вот так изобразили

и надо делать

по absolute думал

но не выход

там ещё потом идет блок с инфой

SelenIT · November 3, 2011

Прямо так и изобразили несколько состояний — таблица узкая, блок за ней ужимается в узкую колонку, таблица широкая, блок расширяется вслед за ней? Имхо, вы зря себе жизнь усложняете. Ставьте внешнему блоку max-width: 45% (например), а таблице 100% ширины — и никто не будет придираться к зазорам в ячейках, я практически уверен.

WalkMan · November 4, 2011

Прямо так и изобразили несколько состояний — таблица узкая, блок за ней ужимается в узкую колонку, таблица широкая, блок расширяется вслед за ней? Имхо, вы зря себе жизнь усложняете. Ставьте внешнему блоку max-width: 45% (например), а таблице 100% ширины — и никто не будет придираться к зазорам в ячейках, я практически уверен.

в таблице данные аяксом подгружаються

тут ёжику понятно что она резиновая

SelenIT · November 4, 2011

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

WalkMan · November 4, 2011

ясно одно

средствами html+css нереально

всем спасибо

вопрос закрыт

Sign In

как предотвратить разрыв блока

Question

Link to comment

Share on other sites

13 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

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