Как расположить 2-столбцы div в ContentPlaceholder, которые ОСТАЮТСЯ 2-столбцами? - PullRequest
Новая
       11

Как расположить 2-столбцы div в ContentPlaceholder, которые ОСТАЮТСЯ 2-столбцами?

0 голосов
/ 23 декабря 2008

У меня есть сайт ASP.NET, который я разрабатываю. Расположение довольно простое. Главная страница имеет заголовок с горизонтальным меню под баннером, занимающим всю ширину. Слева находится панель навигации шириной 150 пикселей с изображением и несколькими внешними ссылками. Остальная часть ширины - это ContentPlaceholder. Под ним нижний колонтитул.

На странице по умолчанию содержание главной страницы имеет несколько делений. Один для «Новостей», один для «Часто задаваемых вопросов», один для «крайних сроков» и другой для «Диаграммы дня». Каждый из них имеет ширину 450 пикселей, и я установил бы их с соответствующим «float: left;» и "плавать: правильно;" таким образом, чтобы левая «колонка» содержала «Новости», затем «Часто задаваемые вопросы» под ней, а в правой колонке были сроки и график. Если пользователь слишком сильно сузит браузер, сроки и график будут перенесены в раздел «Новости и часто задаваемые вопросы».

Теперь мне приказано изменить поведение. Теперь, если пользователь сужает браузер, сроки и график должны «держаться на месте» и оставаться в качестве второго столбца, при этом пользователю необходимо использовать горизонтальную полосу прокрутки, чтобы их правильно видеть.

Я думал, что используя "min-width: 950px;" в общем, содержимое div делало бы это, но «float: right» в div содержимого заканчивает тем, что толкает весь раздел содержимого под панелью навигации, когда я сужаю браузер, и когда я сужаю его дальше, элементы Deadlines и Chart являются STILL получать новости и часто задаваемые вопросы.

Я знаю, что упускаю что-то простое - например, свойство «оставаться направо независимо» - и якорь или что-то в этом роде. Поиски примеров не очень помогают, потому что я не думаю, что я ищу правильные слова в поиске.

Заранее спасибо за любой совет.

Ответы [ 5 ]

0 голосов
/ 24 декабря 2008

Самый простой ответ - обернуть все в контейнер и дать контейнеру ширину, чтобы он никогда не сжимался. Пример 

<div id="container">
  <div id="header"></div>
  <div id="nav"></div>
  <div id="leftContent"></div>
  <div id="rightContent"></div>
  <div id="footer"></div>
</div>

Это позволяет левому и правому содержимому иметь любую высоту.

0 голосов
/ 23 декабря 2008

Когда вам надоест управлять всем этим самостоятельно, вы должны проверить приличную систему сетки CSS.

Вот два:

Эти системы упрощают выполнение тех вещей, о которых вы говорите.

0 голосов
/ 23 декабря 2008

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

position: absolute;
top: 0px;
left: 0px;
...

Тогда ваши сроки будут: 

position: absolute;
top: 0px;
left: 450px;
...

И так далее. Возможно, вам придется использовать относительное в качестве позиции или установить верхнее смещение на основе вашего заголовка и левое смещение на основе вашего div ссылок (который вы уже сказали, что 150), но если вы хотите, чтобы ваша страница оставалась постоянной, это ваша лучшая ставка , Дайте мне знать, если у вас есть какие-либо проблемы с этим.

0 голосов
/ 23 декабря 2008

Это работает для меня, в FF3 и IE6. 

    <html>
    <head>
        <title></title>
    <style>
    .content_section{width:450px;border: solid 1px green;}
    .nav{width:150px; border: solid 1px yellow; float: left;}
    .content_container{width: 950px; border: solid 1px blue; float: left;}

    </style>    
    </head>

    <body>
    <div style="width: 1104px;">
        <div class="nav">
                Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />Navigation here<br />
        </div>
        <div class="content_container">
            <div style="float: left;">
                <div id="news" class="content_section">news<br />news<br />news<br />news<br />news<br />news<br />news<br />news<br /></div><br />
                <div id="faq" class="content_section">faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br />faq<br /></div>
            </div>
            <div style="float: right;">
                <div id="deadlines" class="content_section">deadlines<br /></div><br />
                <div id="chart" class="content_section">chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br />chart<br /></div>
            </div>
        </div>
    </div>
    </html>
0 голосов
/ 23 декабря 2008

Как бы еретично это ни звучало, безусловно, самый простой способ - выбросить div и использовать структуру таблицы.

Ниже приведен полный пример. Просто сохраните его как HTML-файл и просмотрите в браузере. Кстати, вы можете поиграть с разными типами документов, чтобы увидеть, как они влияют на вывод. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
<style>
.box { width:250px;float:left;border: solid 1px green;}
.outer{width:600px;}
</style>    
</head>

<body>
<div class="outer">
<div class="box" style="height: 200px">Hello World!</div>
<div class="box" style="height: 300px">Hello World!</div>
<div class="box" style="height: 100px">Hello World! asd asdfasfd asdjasd hyasydufuasydf auysdfaysdfuaysdfu yasdufy ausdyf aiusdyf aiusydfuasdfasdf asf</div>
<div class="box" style="height: 50px">Hello World!</div>
</div>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...