В макете с двумя столбцами как сделать так, чтобы один столбец расширялся до общей ширины, если я удаляю другой столбец? - PullRequest
Новая
       0

В макете с двумя столбцами как сделать так, чтобы один столбец расширялся до общей ширины, если я удаляю другой столбец?

1 голос
/ 03 февраля 2010

Лучше объяснил с разметкой:

HTML: 

<div><!--both sidebar and content share width-->
  <div id="content"><!--maybe at 30%-->
  </div>
  <div id="sidebar"><!--may be at 70%-->
  </div>
</div>

CSS: 

#sidebar{float:left;} /* no idea what width*/
#content{float:right;} /* no idea what width*/

Что я хочу сделать, так это то, что если в разметке отсутствует боковая панель, div содержимого расширяется, чтобы занять место боковой панели: 

<div>
 <div id="content"><!--width now at 100%-->
 </div>
</div>

Ответы [ 5 ]

2 голосов
/ 03 февраля 2010

Чистый метод CSS будет использовать макет таблицы CSS:

CSS: 

#wrapper{
  display: table;
  width: 100%;
}
#content { 
  display: table-cell; 
  width: auto; 
}
#sidebar { 
  display: table-cell;
  width: 30%; 
}

HTML: 

<div id="wrapper"><!--both sidebar and content share width-->
  <div id="content"><!--maybe at 30%-->content
  </div>
  <div id="sidebar"><!--may be at 70%-->sidebar
  </div>
</div>

Вышеописанное, однако, не будет работать для более старых браузеров, таких как IE6 / 7 и т. Д. Использование javascript (как упоминалось в других ответах на этот пост) в качестве запасного варианта будет идеальным.

0 голосов
/ 10 февраля 2011

Проверьте эту технику:

http://www.webdesignerwall.com/tutorials/css-clearing-floats-with-overflow/

Он очень гибкий и не требует кода на стороне сервера. Вещи IMO должны быть разделены: на стороне сервера - для задач на стороне сервера, на стороне - для задач на стороне клиента.

Удачи

0 голосов
/ 03 февраля 2010

Вы можете добиться этого, если перевернете свои дивы так: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fluid Columns</title>
<style type="text/css">
<!--
div{height:100px; margin-bottom: 50px; color: #fff;}
#sidebar{float:left;background: red;} /* no idea what width*/
#content{background: blue;} /* no idea what width*/
-->
</style>
</head>


<body>
<div><!--both sidebar and content share width-->
  <div id="sidebar"><!--may be at 30%-->
  Sidebar
  </div>
  <div id="content"><!--maybe at 70%-->
  Partial Width
  </div>
</div>

<div>
 <div id="content"><!--width now at 100%-->
 Whole Width
 </div>
</div>
</body>
</html>

Единственный недостаток этого подхода заключается в том, что вам нужно знать, какова ширина вашей боковой панели, если вы хотите добавить какие-либо отступы к вашему контенту div. Это поправимо, но так как это был не твой вопрос, я не скажу тебе, как сосать яйца, я уверен, что ты справишься;)

0 голосов
/ 03 февраля 2010

Функция: 

<script type='text/javascript'>
   /**** Minimising ****/

function Minimise()
{
    document.getElementById('FirstColumn').style.width = '0%';
    document.getElementById('SecondColumn').style.width = '100%';
}

/**** Expanding ****/

function Maximise()
{
    document.getElementById('FirstColumn').style.width = '50%';
    document.getElementById('SecondColumn').style.width = '50%';
}
    </script>

Для запуска функции 

<a href="javascript:Minimise();">Click here to minimise column1 etc</a>

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

0 голосов
/ 03 февраля 2010

Этот хитрый:

Если вы устанавливаете ширину на боковой панели, перемещаете ее, и не устанавливаете ширину содержимого (также не перемещайте содержимое также, поскольку это приведет к тому, что div будет «сжато-оберточным»). Тогда колонка будет вести себя так, как вам нужно. 

#content { width: auto; display:block } /* not really necessary as these are default */
#sidebar { width: 30%; float: right }

Я хотел бы добавить, что это по своей сути неестественно и часто ограничивает. Лучше всего, если вы управляете макетом на стороне сервера (у вас есть какой-то скрипт, который генерирует макеты), а затем добавляйте классы CSS в документ до его визуализации.

Возможно чисто HTML-решение, но оно также зависит от этого конкретного поведения. Если вы хотите использовать плавающий #content div, он не будет работать (потому что вы будете вынуждены указывать размеры, чтобы избежать эффекта сжатия).

Вы также можете сделать это с помощью JavaScript. При этом следует обратить внимание на то, что при включении javascript вы можете получить FOUC (флеш-контент без стиля).

С помощью jQuery вы можете сделать что-то вроде подсчета соседних div, т. Е. 

jQuery('#content').nextAll().length

Затем используйте результат, чтобы сделать что-то вроде: 

jQuery('#content').addClass('has_sidebar').
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...