Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
skynet97
0 / 0 / 0
Регистрация: 04.08.2014
Сообщений: 15
#1

Как сделать так чтобы правый и левый блоки автоматически изменяли высоту, когда пишешь текст в контент? - HTML, CSS

04.08.2014, 19:05. Просмотров 586. Ответов 4
Метки нет (Все метки)

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


Как сделать так, чтобы правый и левый блоки автоматически изменяли высоту когда пишешь текст в контент?
Помогите!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.08.2014, 19:05
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Как сделать так чтобы правый и левый блоки автоматически изменяли высоту, когда пишешь текст в контент? (HTML, CSS):

Как сделать, чтобы структура страницы и её контент не изменяли своего местоположения при зуме в окне браузера? - HTML, CSS
Доброго времени суток, форумчане! При вёрстке сайта столкнулся с такой проблемой: при изменении зума браузера блоки с размещённым внутри...

Можно как-то сделать так, чтобы браузер, когда видит текст заключённый делал его курсивом? - HTML, CSS
Можно как-то сделать так, чтобы браузер, когда видит текст заключённый в кавычки делал его курсивом?

Как сделать так чтобы фон оставался на месте, а прокручивались блоки сайта - HTML, CSS
Пытаюсь сделать так чтобы фон оставался на месте и не повторялся, а двигались только (как бы это сказать?) блоки внутри сайта, как это...

Как сделать, чтобы картинки автоматически добавлялись, если увеличивается текст - HTML, CSS
Как можно сделать, чтобы картинки автоматически добавлялись, если увеличивается текст. Щас поясню с примером: Вот тут по середине,...

Как в позиционировании сделать так чтобы текст обтекал фотографию - HTML, CSS
Добрый день))) Я только начал изучать HTML и столкнулся с такой проблемой: как в позиционировании сделать так что-бы текст обтекал...

Рамка при наведении на изображение - изображение скачет, как сделать, чтобы они не изменяли позицию? - HTML, CSS
Хочу сделать рамку при наведении на изображение, но изображение скачет, как сделать, чтобы они не изменяли позицию? ...

4
vovandr
628 / 516 / 139
Регистрация: 19.08.2013
Сообщений: 1,401
04.08.2014, 21:24 #2
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Через js или через css3 flexbox
1
skynet97
0 / 0 / 0
Регистрация: 04.08.2014
Сообщений: 15
04.08.2014, 21:38  [ТС] #3
с java не знаком, "css3 flexbox" - а как через это сделать?
0
vovandr
628 / 516 / 139
Регистрация: 19.08.2013
Сообщений: 1,401
04.08.2014, 21:50 #4
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
HTML5
1
2
3
4
5
<div class="container">
  <div class="col col-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat cum doloremque labore quibusdam! Nam quibusdam id repudiandae officiis beatae reprehenderit, veritatis corrupti praesentium debitis placeat amet perspiciatis quaerat nostrum pariatur!</div>
  <div class="col col-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum temporibus aliquam rerum, dignissimos incidunt, nobis accusamus optio. Assumenda, possimus accusamus fugit obcaecati quas minima quisquam laboriosam adipisci veniam laudantium, magnam in voluptatum vel, dignissimos porro similique sequi, quae quod necessitatibus et neque voluptatibus delectus. Quis quaerat nesciunt nulla ea deserunt non est nobis, doloremque modi corporis repudiandae sequi enim rem labore commodi quam tenetur ipsam optio quia libero perspiciatis maxime alias. Nostrum rerum, omnis blanditiis molestiae, iure sint quae dolore. Reiciendis amet ea nemo eveniet modi, magni necessitatibus, minus, blanditiis tempore recusandae, officia temporibus placeat libero accusantium aut eos expedita. Minima impedit quisquam ea cum pariatur illo iure, aspernatur quod, tempore doloribus laudantium, fuga voluptatibus provident quam adipisci perferendis? Necessitatibus culpa similique perferendis, sit, rerum blanditiis atque officiis. Voluptatem in quibusdam nulla cumque soluta, aliquam sapiente. Voluptatum sed ipsam in totam hic praesentium, a? Culpa quos dolorum voluptates esse debitis veritatis, ex assumenda accusantium. Vero fuga omnis quaerat sequi molestias labore placeat iusto minus, in accusamus sed voluptatibus dolore fugit vel similique ullam magni. Excepturi natus minima, harum aspernatur aperiam animi sunt assumenda atque id! Magni alias, reiciendis nihil nisi architecto ex debitis cum dolore temporibus quia harum quo pariatur sapiente laudantium quibusdam autem accusamus animi adipisci aliquam ad voluptate? Similique quos aut nemo ut alias dolore officia voluptatum voluptates labore temporibus ducimus ipsam unde fuga velit eum neque, adipisci placeat molestias soluta architecto atque! Voluptatum dolorum possimus magnam, accusantium quisquam facere rerum pariatur quaerat, quam velit facilis, nisi laborum saepe! Vel sapiente tempora quam sint laudantium eum ullam molestiae distinctio quisquam velit expedita, pariatur, ab veritatis quasi natus! Est non eius quo similique optio, vel voluptatibus cumque culpa natus facilis pariatur tenetur ut ipsam a cum, totam repellendus, at hic sed voluptate nobis quod facere aut. Labore magni aperiam praesentium, consequatur sint animi accusamus eveniet necessitatibus velit vitae saepe esse porro nihil atque a, similique impedit iste eligendi ipsa obcaecati ratione voluptates! Fuga inventore temporibus illo beatae, ut quam hic debitis molestiae fugiat. Architecto excepturi cupiditate vel in dignissimos similique deserunt ea dolor quia impedit atque, sit ducimus molestiae quas sapiente et dicta mollitia consequatur facere assumenda temporibus est debitis. Omnis assumenda aliquam aperiam, rerum incidunt temporibus at nulla hic animi excepturi quos, sapiente laboriosam ducimus, error mollitia odit ex et blanditiis! Velit soluta alias culpa, iusto praesentium commodi dolores deserunt officia labore obcaecati explicabo amet aspernatur vero reprehenderit, non libero quas dolor. Eos reprehenderit amet laudantium rerum explicabo corrupti, hic vero minima natus quibusdam sunt neque ea? Dolore neque qui consequuntur. Laudantium magni esse, cumque nihil porro facilis in dignissimos nisi! Magni, nesciunt consectetur excepturi repellendus provident ab obcaecati perferendis. Eos maxime, illum in dicta porro error eveniet eligendi culpa fugiat quo cumque unde minus itaque, quis qui nostrum accusantium possimus sapiente pariatur. Atque illum ratione minima eligendi ipsam, quia maiores, reiciendis iusto odit assumenda molestiae suscipit nisi modi sequi rem asperiores, similique quae omnis? Dolorem laudantium dignissimos praesentium doloremque, recusandae. Et, facilis. Optio explicabo inventore, provident delectus sequi quae rerum ab consectetur dolores sunt voluptas nesciunt aliquid saepe esse quos ducimus sapiente nulla dolorum, nam error reiciendis molestias. Tenetur quaerat commodi minima dolor voluptas nisi, neque culpa magni consequatur nam delectus repellendus temporibus quod fuga! Odio, amet debitis distinctio veritatis delectus! Placeat impedit quos perferendis voluptatibus nesciunt, reprehenderit totam dolore. Beatae, error, incidunt. Eaque aperiam repudiandae quam esse natus amet sequi, explicabo dolorum neque rem. Reiciendis, amet nulla vel facere cum perferendis quo unde, harum itaque iusto! Obcaecati voluptatem delectus totam tempore odio a commodi qui dicta nesciunt error, nostrum vitae dolorum numquam deserunt ducimus explicabo quod illo similique eius minima consectetur. Incidunt illo ea optio quod praesentium ex, quos nobis debitis, itaque, expedita nam tempora cupiditate fugiat, porro. Aut tenetur architecto, officiis veritatis quod distinctio iusto assumenda, laborum quidem ipsum vel totam autem? Nemo cumque culpa sapiente, aut libero labore amet quisquam eos quia molestias fugiat. Quod recusandae excepturi vero eveniet, aperiam numquam ipsa quo asperiores? Quae eligendi, omnis ex voluptates et. Doloribus veniam voluptatem, dolorem voluptatum, adipisci pariatur suscipit magni quas obcaecati sit fugit minima impedit sed id ex ipsa eaque beatae, dicta fuga. Quos ex laborum veniam voluptatum magni in a corrupti amet rem aspernatur obcaecati, perferendis tempore odio voluptates accusantium, eum blanditiis, sunt cum. Architecto ex quaerat, non facere iste sapiente neque a libero obcaecati debitis recusandae inventore perspiciatis at, laboriosam et officia cupiditate ducimus. Vel minus, blanditiis natus, numquam voluptates, molestias repudiandae sequi quae doloribus omnis culpa quia nisi nihil quis iure cumque est sunt aliquam nemo quas alias, sint quod ipsam dolorum. Quis, iusto officia incidunt. Esse recusandae, tenetur illo aperiam veniam laboriosam vero, nulla, voluptate expedita animi facilis repellat optio molestiae inventore ratione quisquam neque laudantium aspernatur fuga doloribus distinctio! Excepturi, voluptatem, iste! Fugit necessitatibus debitis quasi veniam iste temporibus.</div>
  <div class="col col-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil sunt cum consequatur aliquam error voluptate? Iste alias maiores consectetur laboriosam id aspernatur quo, dicta aliquid corporis dolore libero cumque? Eum quam nobis odio ratione autem laborum facere, accusamus inventore aperiam. Cumque saepe quis, enim eveniet, fugit temporibus. Temporibus ducimus facere explicabo incidunt modi voluptas, ut ipsum vero optio corrupti laudantium quod quia perspiciatis, praesentium ipsa mollitia placeat eveniet totam laborum. Accusamus eos veniam voluptates quaerat facere nobis quasi esse quo asperiores voluptate debitis corrupti rem dolore repudiandae aliquid quis minus id aliquam, perferendis aperiam natus modi eum numquam molestiae. Nostrum architecto molestias laborum illum maxime! Sed nam vel a suscipit minus asperiores iusto aut? Voluptas eos totam similique placeat quidem voluptatibus quod, fugit laudantium deserunt blanditiis porro vero velit, provident perspiciatis illo repudiandae! Libero eaque perferendis aspernatur consequuntur autem ipsam eos a voluptatum placeat vero maiores mollitia eius, facere! Inventore vel officia sint deleniti accusantium repellat aspernatur voluptatum repellendus dolor ipsum tempora, sed dicta nobis, odio totam asperiores mollitia quos excepturi tenetur vitae! Voluptatibus, delectus. Distinctio autem voluptates quae, fuga voluptatem. Laboriosam consequatur repudiandae aut, a consectetur est sunt blanditiis porro minima. Quaerat vero expedita dolorem voluptas, animi commodi.</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 1200px;
  margin: 0 auto;
}
.col{
  padding: 20px;
}
.col-1, .col-3{
  background: green;
  width: 20%;
}
.col-2{
  width: 60%;
}
Демо http://codepen.io/anon/pen/Ibmgh
Если же браузер не поддерживает flexbox для фолбэка можно подключить js. Хотя опять же есть решение кроссбраузерное через table-cell: (не люблю эту хрень потому как бывают проблемы с позиционирование в firefox но вам вполне может подойти):
HTML5
1
2
3
4
5
<div class="container">
  <div class="col col-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat cum doloremque labore quibusdam! Nam quibusdam id repudiandae officiis beatae reprehenderit, veritatis corrupti praesentium debitis placeat amet perspiciatis quaerat nostrum pariatur!</div>
  <div class="col col-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum temporibus aliquam rerum, dignissimos incidunt, nobis accusamus optio. Assumenda, possimus accusamus fugit obcaecati quas minima quisquam laboriosam adipisci veniam laudantium, magnam in voluptatum vel, dignissimos porro similique sequi, quae quod necessitatibus et neque voluptatibus delectus. Quis quaerat nesciunt nulla ea deserunt non est nobis, doloremque modi corporis repudiandae sequi enim rem labore commodi quam tenetur ipsam optio quia libero perspiciatis maxime alias. Nostrum rerum, omnis blanditiis molestiae, iure sint quae dolore. Reiciendis amet ea nemo eveniet modi, magni necessitatibus, minus, blanditiis tempore recusandae, officia temporibus placeat libero accusantium aut eos expedita. Minima impedit quisquam ea cum pariatur illo iure, aspernatur quod, tempore doloribus laudantium, fuga voluptatibus provident quam adipisci perferendis? Necessitatibus culpa similique perferendis, sit, rerum blanditiis atque officiis. Voluptatem in quibusdam nulla cumque soluta, aliquam sapiente. Voluptatum sed ipsam in totam hic praesentium, a? Culpa quos dolorum voluptates esse debitis veritatis, ex assumenda accusantium. Vero fuga omnis quaerat sequi molestias labore placeat iusto minus, in accusamus sed voluptatibus dolore fugit vel similique ullam magni. Excepturi natus minima, harum aspernatur aperiam animi sunt assumenda atque id! Magni alias, reiciendis nihil nisi architecto ex debitis cum dolore temporibus quia harum quo pariatur sapiente laudantium quibusdam autem accusamus animi adipisci aliquam ad voluptate? Similique quos aut nemo ut alias dolore officia voluptatum voluptates labore temporibus ducimus ipsam unde fuga velit eum neque, adipisci placeat molestias soluta architecto atque! Voluptatum dolorum possimus magnam, accusantium quisquam facere rerum pariatur quaerat, quam velit facilis, nisi laborum saepe! Vel sapiente tempora quam sint laudantium eum ullam molestiae distinctio quisquam velit expedita, pariatur, ab veritatis quasi natus! Est non eius quo similique optio, vel voluptatibus cumque culpa natus facilis pariatur tenetur ut ipsam a cum, totam repellendus, at hic sed voluptate nobis quod facere aut. Labore magni aperiam praesentium, consequatur sint animi accusamus eveniet necessitatibus velit vitae saepe esse porro nihil atque a, similique impedit iste eligendi ipsa obcaecati ratione voluptates! Fuga inventore temporibus illo beatae, ut quam hic debitis molestiae fugiat. Architecto excepturi cupiditate vel in dignissimos similique deserunt ea dolor quia impedit atque, sit ducimus molestiae quas sapiente et dicta mollitia consequatur facere assumenda temporibus est debitis. Omnis assumenda aliquam aperiam, rerum incidunt temporibus at nulla hic animi excepturi quos, sapiente laboriosam ducimus, error mollitia odit ex et blanditiis! Velit soluta alias culpa, iusto praesentium commodi dolores deserunt officia labore obcaecati explicabo amet aspernatur vero reprehenderit, non libero quas dolor. Eos reprehenderit amet laudantium rerum explicabo corrupti, hic vero minima natus quibusdam sunt neque ea? Dolore neque qui consequuntur. Laudantium magni esse, cumque nihil porro facilis in dignissimos nisi! Magni, nesciunt consectetur excepturi repellendus provident ab obcaecati perferendis. Eos maxime, illum in dicta porro error eveniet eligendi culpa fugiat quo cumque unde minus itaque, quis qui nostrum accusantium possimus sapiente pariatur. Atque illum ratione minima eligendi ipsam, quia maiores, reiciendis iusto odit assumenda molestiae suscipit nisi modi sequi rem asperiores, similique quae omnis? Dolorem laudantium dignissimos praesentium doloremque, recusandae. Et, facilis. Optio explicabo inventore, provident delectus sequi quae rerum ab consectetur dolores sunt voluptas nesciunt aliquid saepe esse quos ducimus sapiente nulla dolorum, nam error reiciendis molestias. Tenetur quaerat commodi minima dolor voluptas nisi, neque culpa magni consequatur nam delectus repellendus temporibus quod fuga! Odio, amet debitis distinctio veritatis delectus! Placeat impedit quos perferendis voluptatibus nesciunt, reprehenderit totam dolore. Beatae, error, incidunt. Eaque aperiam repudiandae quam esse natus amet sequi, explicabo dolorum neque rem. Reiciendis, amet nulla vel facere cum perferendis quo unde, harum itaque iusto! Obcaecati voluptatem delectus totam tempore odio a commodi qui dicta nesciunt error, nostrum vitae dolorum numquam deserunt ducimus explicabo quod illo similique eius minima consectetur. Incidunt illo ea optio quod praesentium ex, quos nobis debitis, itaque, expedita nam tempora cupiditate fugiat, porro. Aut tenetur architecto, officiis veritatis quod distinctio iusto assumenda, laborum quidem ipsum vel totam autem? Nemo cumque culpa sapiente, aut libero labore amet quisquam eos quia molestias fugiat. Quod recusandae excepturi vero eveniet, aperiam numquam ipsa quo asperiores? Quae eligendi, omnis ex voluptates et. Doloribus veniam voluptatem, dolorem voluptatum, adipisci pariatur suscipit magni quas obcaecati sit fugit minima impedit sed id ex ipsa eaque beatae, dicta fuga. Quos ex laborum veniam voluptatum magni in a corrupti amet rem aspernatur obcaecati, perferendis tempore odio voluptates accusantium, eum blanditiis, sunt cum. Architecto ex quaerat, non facere iste sapiente neque a libero obcaecati debitis recusandae inventore perspiciatis at, laboriosam et officia cupiditate ducimus. Vel minus, blanditiis natus, numquam voluptates, molestias repudiandae sequi quae doloribus omnis culpa quia nisi nihil quis iure cumque est sunt aliquam nemo quas alias, sint quod ipsam dolorum. Quis, iusto officia incidunt. Esse recusandae, tenetur illo aperiam veniam laboriosam vero, nulla, voluptate expedita animi facilis repellat optio molestiae inventore ratione quisquam neque laudantium aspernatur fuga doloribus distinctio! Excepturi, voluptatem, iste! Fugit necessitatibus debitis quasi veniam iste temporibus.</div>
  <div class="col col-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil sunt cum consequatur aliquam error voluptate? Iste alias maiores consectetur laboriosam id aspernatur quo, dicta aliquid corporis dolore libero cumque? Eum quam nobis odio ratione autem laborum facere, accusamus inventore aperiam. Cumque saepe quis, enim eveniet, fugit temporibus. Temporibus ducimus facere explicabo incidunt modi voluptas, ut ipsum vero optio corrupti laudantium quod quia perspiciatis, praesentium ipsa mollitia placeat eveniet totam laborum. Accusamus eos veniam voluptates quaerat facere nobis quasi esse quo asperiores voluptate debitis corrupti rem dolore repudiandae aliquid quis minus id aliquam, perferendis aperiam natus modi eum numquam molestiae. Nostrum architecto molestias laborum illum maxime! Sed nam vel a suscipit minus asperiores iusto aut? Voluptas eos totam similique placeat quidem voluptatibus quod, fugit laudantium deserunt blanditiis porro vero velit, provident perspiciatis illo repudiandae! Libero eaque perferendis aspernatur consequuntur autem ipsam eos a voluptatum placeat vero maiores mollitia eius, facere! Inventore vel officia sint deleniti accusantium repellat aspernatur voluptatum repellendus dolor ipsum tempora, sed dicta nobis, odio totam asperiores mollitia quos excepturi tenetur vitae! Voluptatibus, delectus. Distinctio autem voluptates quae, fuga voluptatem. Laboriosam consequatur repudiandae aut, a consectetur est sunt blanditiis porro minima. Quaerat vero expedita dolorem voluptas, animi commodi.</div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
.container{
  display: table;
}
.col{
  display: table-cell;
  padding: 20px;
}
.col-1, .col-3{
  background: green;
}
Демо http://codepen.io/anon/pen/wbqtu

Добавлено через 1 минуту
java не знаком
я тоже но с javascript очень даже, так что если нужен фолбэк напишу за 1 мин
1
skynet97
0 / 0 / 0
Регистрация: 04.08.2014
Сообщений: 15
04.08.2014, 22:02  [ТС] #5
Щас попробую)

Добавлено через 5 минут
Помогло, спасибо вам большое!!!)
0
04.08.2014, 22:02
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.08.2014, 22:02
Привет! Вот еще темы с ответами:

Как сделать так чтобы при наведении на неполный текст, высвечивался полный? - HTML, CSS
ВСЕМ ПРИВЕТ!!! Помогите пожалуйста! Что нужно сделать чтобы при наведении мышки на синюю зону (смотри на картинке), на красной зоне чтобы...

Есть сайт на Jommla 1.7. В нем сбоку модуль (блок). В этом модуле есть картинка. Как сделать так, чтобы автоматически обновлялась только картинка? - HTML, CSS
http://stost.ru/ny/ny.php - вот картинка, может, кому пригодится) типа сколько до НГ осталось)

Как сделать, чтобы левый край слоя не пропадал за экраном? - HTML, CSS
при позиционировании слоя методом left:50% margin-left - при уменьшении ширины экрана рано или поздно левый край пропадает за экраном. как...

Как зафиксировать блоки так, чтобы они не прокручивались вместе с контентом - HTML, CSS
Такая беда необходимо создать 3 блока ---- ------- ---- &lt;- | Content | -&gt; ---- ------- ---- ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru