Втиснуть блок, если есть место, а если нет,то оставить 100%

[nikki4]

Вот сделал рыбу, что есть:

<div class="wrapper">  <div class="wrapper2">      <div class="photo"></div>    <div class="param"></div>  </div><div class="desc"></div></div>

.wrapper {width:500px; height:1000px; background:pink; margin:0 auto;}.photo {background:yellow;float:left;height:300px;width:200px;}.param {background:green;float:left; height:200px;width:200px;}.desc {background:black;float:left; height:400px;width:100%;}

тоже, онлайн: http://cssdeck.com/labs/usgkdfyd

 

задача:

если тех. характеристики товара  (param) короткие, т.е. есть полно свободного места, то втиснуть описание (desc), чтобы карточка товара выглядела так:

http://cssdeck.com/labs/kd56nsdh

Если же характеристик товара много, тогда просто растянуть описание под всем на 100%. Как на первой ссылке

 

Как такое сделать?

Edited October 9, 2015 by nikki4

[infidel]

Ну на js это довольно легко можно сделать. Чистым цсс, смому было бы интересно посмотреть, если это вообще возможно.

 

P.S. cssdesk глючный, съел мой код

[nikki4]

Спасибо, но на реальном примере не работает.

Как я понял это связанно с тем, что поля высоты не заполнены. Я их выше заполнил просто, чтобы объяснить какой блок куда.

так то выглядит скорее так, где информация о яблоках, в случае если есть место после описания - переместить на верх. а если нет, оставить на 100% ширину под

http://jsfiddle.net/fv3hqtsc/2/

<div class="wrapper">  <div class="wrapper2">      <div class="photo"><img src="http://s1.iconbird.com/ico/2013/11/491/w256h2561384698911applered.png"/></div>     <div class="param">энергетическая ценность яблока</div>  </div><div class="desc">информация о яблоках</div></div>

.wrapper {width:500px; height:1000px; background:pink; margin:0 auto;}.photo {float:left;}.param {float:left; }.desc {float:left;}

Edited October 9, 2015 by nikki4

[infidel]

@nikki4, Работает, просто картинка с яблоком широкая, поэтому не помещается блок шириной 280px. Определись там как-то с размерами, не все же будет резиновое, и от этого исходи, что ставить в условие и какие значения подставлять блокам.

[nikki4]

Да действительно.. тогда в чем дело?

вот пробую, сделал для теста такое, но оно не выдает ни Да, ни Нет.

<script type="text/javascript">var $bs-docs-example = $('.bs-docs-example');if($bs-docs-example.width() > 300){alert('Да');}else{alert('Нет'); }</script>

[infidel]

вот пробую, сделал для теста такое,

jQuery библиотека подключена? bs-docs-example точно класс а не id? Что в консоли? Выкладывайте код на jsfiddle, а то гадать приходится.

[Николя223]

https://learn.javascript.ru/variables
пункт про имена переменных

[infidel]

пункт про имена переменных

Точно, не обратил внимание.

[nikki4]

Спасибо, тогда почему так не работает?

переименовал класс без черточки, и вот тестирую:

следующий код - вообще ничего не выдает, никакое сообщение.

<script type="text/javascript">var $bsdocsexample = $('.bsdocsexample');if($bsdocsexample.width() > 300){alert('Да');}else{alert('Нет'); }alert('aaaa'); </script>

если же оставить так:

<script type="text/javascript">alert('aaaa');</script>

то пишет "аааа"

почему, что теперь не так?

 

при этом на jsfiddle работает

Edited October 9, 2015 by nikki4

[infidel]

@nikki4, Ну смотри - тут твой код отрабатывает как надо. Значит что-то не так у тебя локально. Возможно то что я предположил ранее 

jQuery библиотека подключена?

Воспользуйся консолью js браузера, туда выводятся все ошибки.