Фиксированная ширина div бок о бок с максимальной шириной div в CSS

Question

Фиксированная ширина div бок о бок с максимальной шириной div в CSS

0

Я пытаюсь иметь один div, который будет панель меню фиксированного размера слева. Затем еще один div с остальной частью пространства справа.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
        <style>
                #header{
                    height:50px;
                    background-color:red;
                    border-radius:10px;
                }
                .left{
                    width:100px;
                    height:500px;
                    background-color:green;
                    border-radius:10px;
                    float:left;
                }
                .right{
                    background-color:lightskyblue;
                    border-radius:10px;
                    height:500px;
                    margin-left:100px;
                }
                #footer {
                    height:50px;
                    background-color:violet;
                    border-radius:10px;
                    clear:both;
                }
            </style>
    </head>
    <body>
        <div id="header"></div>

        <div class="left"></div>
        <div class="right">
            <h3>Andrew: The Resumé</h3>
            <p>Languages I know:</p>
            <ul>
                <li>Arabic</li>
                <li>Java</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </div>
        <div id="footer"></div>
    </body>
</html>

Это самое близкое, что я мог получить, но ящики даже не были. Наверное, потому что я использовал float с одним div, но не с другим. Если я использую float: слева с шириной правого div не заполняется остальная часть экрана. Помогите!

db-user 21 окт. 2013, в 03:05

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Blake Mann · Answer 1 · 2013-10-20T22-56-00.000Z

Вы можете попробовать использовать оберточный элемент вокруг элементов, которые вы хотите бок о бок, установить для display: table; , а затем установите эти дочерние элементы для display: table-cell;

Таким образом вы можете избавиться от float и margin-left на этих элементах, и они будут сидеть аккуратно рядом друг с другом. Это также позволяет убедиться, что оба элемента имеют одинаковую высоту, поэтому, даже если вы сняли свойства height, они останутся постоянными (относительно друг друга)

Ознакомьтесь с этой демонстрацией:

http://jsfiddle.net/zg6xt/

Это прекрасно работает, но как мне заставить текст вернуться в верхний левый угол div?
обратите внимание, что это не будет работать в IE6 / IE7.
vertical-align: top; получит текст наверх, если не иначе.

Akira Dawson · Answer 2 · 2013-10-20T22-47-00.000Z

Попробуйте обернуть ваш левый и правый div в контейнер.

<div id="container">
        <div class="left"></div>
        <div class="right">
            <h3>Andrew: The Resumé</h3>
            <p>Languages I know:</p>
            <ul>
                <li>Arabic</li>
                <li>Java</li>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </div>
</div>

и в вашем css вы будете использовать float влево и вправо. Контейнер используется, чтобы содержать своих детей от вырывания повсюду. Вы можете применить к нему clearfix и/или margin: 0 auto в зависимости от вашей ситуации. Применитесь к вашим теперь дочерним divs:

.left{
    float:left;
}
.right{
    float:right;
}

Надеюсь, это поможет. Я склоняюсь к тому, чтобы левый и правый контейнеры оставались как можно скорее, и они использовали динамическую ширину (например, проценты). Надеюсь, вам это удастся!