Плавающий второй элемент справа без указания ширины первого? - PullRequest
Новая
       7

Плавающий второй элемент справа без указания ширины первого?

1 голос
/ 14 декабря 2010

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

У меня есть два элемента: контейнер контента (#content) и контейнер рекламы (#ads). Контейнер для контента будет на каждой странице сайта. Объявления будут размещены на некоторых страницах и имеют фиксированную ширину. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css" media="screen">

        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 800px;
            border: 1px solid blue;
        }

        #ads {
            float: right;
            border: 1px solid lime;
        }

        .ad {
            width: 100px;
            height: 100px;
            background: gray;
        }

        #content {
            overflow: hidden;
            border: 1px solid red;
        }

    </style>

</head>

<body>

    <div id="container">

        <ul id="ads">
            <li class="ad">Buy Coke</li>
            <li class="ad">No, Buy Pepsi!</li>
            <li class="ad">Coke bought more ad space</li>
        </ul>

        <div id="content">
            <p>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.</p>
            <p>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.</p>
            <p>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.</p>
            <p>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.</p>
            <p>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.</p>
            <p>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.</p>
        </div>

    </div>

</body>
</html>

(Хорошо, я признаю, что это не действительно мой код, но упрощение содержания / рекламы делает мой вопрос намного более простым.)

То, что у меня здесь есть, в основном является идеальной установкой в ​​том смысле, что оно позволяет удалить список #ads, а также #content для естественного перекомпоновки, чтобы занять его место. Кроме того, я нигде не указал ширину #content в таблице стилей. Это обеспечивает дополнительную степень гибкости: макет можно использовать с контейнером любой ширины.

Но я перфекционист; Я не хочу, чтобы объявления показывались раньше контента в исходном порядке.

Мой вопрос: есть ли способ выполнить этот макет, который удовлетворяет следующим требованиям:

  • # объявлений следует за # контентом в источнике
  • Удаление #ads из источника приводит к тому, что #content занимает всю ширину родительского элемента (#container) без изменений CSS
  • Ширина #content явно не записывается в CSS (т. Е. Единственное изменение, необходимое для расширения страницы, - это изменение ширины # контейнера)

Ответы [ 2 ]

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

требования 1 и 3 противоречат друг другу. если вы хотите, чтобы #ads следовал за #content в источнике и не указывал ширину для #content, тогда реклама будет отображаться под контентом, а не справа. Поскольку #content не имеет ширины, она будет занимать всю ширину контейнера. Я думаю, что вам нужно отказаться от требования 1. То, как это делается сейчас, абсолютно нормально.

0 голосов
/ 15 декабря 2010

если вы не боитесь css3 (в основном это означает, что вам не нужно беспокоиться о т. Е.) Это действительно возможно: 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{display:-moz-box; -moz-box-orient:horizontal; width:500px; background:yellow;}
        .content{-moz-box-flex:1; background:red;}
        .ads{background:blue; width:100px;}
    </style>
</head>
<body>
    <p>with ads:</p>
    <div class="container">
        <div class="content">content</div>
        <div class="ads">ads</div>
    </div>
    <p>without ads:</p>
    <div class="container">
        <div class="content">content</div>
    </div>    
</body>
</html>

это только firefox, обязательно примените соответствующийпрефиксы вендоров (-webkit-, -o-) для других браузеров.чтобы сделать эту работу, то есть, хотя будет некоторый JavaScript для записи.

...