Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.09.2015, 16:33
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Растянуть блок на оставшееся пространство
Ребят подскажите плиз, как реализовать:

Блоки справа от меня должны растягиваться на всю ширину после меню. Возможно ли это только средствами css?
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2015, 19:55
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Какую то сложную задачу вы хотите решить. Не проще ли определиться сколько N-блоков у вас будет и задать N+1-блоку другой класс ?
В рамках того, что вы хотите могу лишь предложить такое:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
  width: 300px;
  float: left;
border:1px solid green;
}
.Nblock {

}
.clearfix:after {
  content: "."; /* добавить содержимое: "." */
  display: block;  /* сделать блоком, т.к. inline не может иметь clear */
  clear: both;  /* с обеих сторон clear */
  visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
  height: 0;  /* сделать высоту 0, чтобы не занимал место */
}

</style>
</head>
<body>
<div class="clearfix">
<div class="menu">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>

  <div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2015, 20:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от EmperioAf
visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
зачем прятать то, что ненужно добавлять ?
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2015, 20:34
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от рони Посмотреть сообщение
зачем прятать то, что ненужно добавлять ?
не знаю
у меня лежит этот код скопированный с learn.javascript.ru, и я никогда не читал его, потому что он работает
Ответить с цитированием
  #5 (permalink)  
Старый 30.09.2015, 08:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

EmperioAf, чего ты там накрутил?
Зачем все эти бубны?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
	width: 300px;
	float: left;
	border:1px solid green;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="menu">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>

В твоем примере простое сочетание плавающего блока с другими блочными элементами... Их контент обязан обтекать плавающий блок.
Но сами блоки не обтекают.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
	width: 300px;
	float: left;
	border:1px solid green;
	margin-left: 10px;
}
.Nblock {
	border:1px solid red;
}
.clearfix:after {
  content: "."; /* добавить содержимое: "." */
  display: block;  /* сделать блоком, т.к. inline не может иметь clear */
  clear: both;  /* с обеих сторон clear */
  visibility: hidden; /* сделать невидимым, зачем нам точка внизу? */
  height: 0;  /* сделать высоту 0, чтобы не занимал место */
}
</style>
</head>
<body>
<div class="clearfix">
<div class="menu">
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
  </ul>
</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 30.09.2015, 08:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Siend, может вот с таким вариантом у тебя что-то получится замутить...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
	width: 300px;
	float: left;
	border:1px solid green;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.Nblock {
	display: inline;
	border:1px solid red;
}
</style>
</head>
<body>
<div class="clearfix">
	<div class="menu">
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
		</ul>
	</div>
	<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<br />
	<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<br />
	<div class="Nblock">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
</div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 30.09.2015, 09:05
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от ksa
EmperioAf, чего ты там накрутил?
Зачем все эти бубны?
разве в моей вёрстке есть лишние элементы? Просто я не догадался дать блокам
display: inline;

потому что в рамках моего мышления делать универсальный блочный элемент строчным - это абсурд. Надо сразу использовать span
Ответить с цитированием
  #8 (permalink)  
Старый 30.09.2015, 09:51
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от EmperioAf
разве в моей вёрстке есть лишние элементы?
Я убрал из твоего примера часть ЦСС и разницы не заметил. Именно эту часть и назвал "бубном"...
Ответить с цитированием
  #9 (permalink)  
Старый 30.09.2015, 10:04
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Уважаемые, спасибо что оперативно отозвались. Поясню что да как)

Блоки по центру, которые должны обтекать - могут содержать не только текст, но и картинки и другие блоки. В сущности мне важно чтобы они именно растягивались на ширину оставшегося места, а не заходили на блок меня, как бы прячась под него, в то время как содержимое обтекалось.

Взяв один из последний вариантов и добавив в него блоки со 100% шириной получил вот такую вот штуку:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
.menu {
    width: 300px;
    float: left;
    border:1px solid green;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.Nblock {
    display: inline;
    border:1px solid red;
}

.object{
width:100%;
height:30px;
background-color:green;
}
</style>
</head>
<body>
<div class="clearfix">
    <div class="menu">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </div>
    <div class="Nblock"><div class="object" ></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <br />
    <div class="Nblock"><div class="object" ></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <br />
    <div class="Nblock"><div class="object" ></div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
</body>
</html>


Что определенно не отвечает моей задумке) Есть варианты решения такой задачки?)
Ответить с цитированием
  #10 (permalink)  
Старый 30.09.2015, 13:47
Аватар для mikhail.golovkin
Интересующийся
Отправить личное сообщение для mikhail.golovkin Посмотреть профиль Найти все сообщения от mikhail.golovkin
 
Регистрация: 11.12.2013
Сообщений: 16

Можно реализовать путём создания разных контекстов c помощью float и overflow, например.

<iframe width="800" height="550" src="http://embed.plnkr.co/9RbRhrsnm85UabW7rW1G/preview" frameborder="0" allowfullscreen></iframe>


Ещё способы создать контекст: https://developer.mozilla.org/ru/doc...atting_context

К сожалению, в учебнике об этом ничего не сказано, а тема достаточно важная.

Последний раз редактировалось mikhail.golovkin, 01.10.2015 в 18:36. Причина: неточности в формулировках, сбивающие с толку
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 14:39
Растянуть блок под загруженное содержимое ev09 jQuery 4 09.05.2015 10:09
Растянуть блок на оставшуюся высоту BETEPAH Элементы интерфейса 11 25.11.2014 10:29
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
Как растянуть блок? Александр141 (X)HTML/CSS 2 21.05.2013 23:22