Как расположить два деления рядом с каждым, которые расширяются до размера, доступного без переноса - PullRequest
Новая
       31

Как расположить два деления рядом с каждым, которые расширяются до размера, доступного без переноса

0 голосов
/ 09 сентября 2011

Рассмотрим этот бит HTML и CSS: 

<html>
    <head>
        <title>Relative Positioning Resize Demo</title>
        <style>
            div.outerDiv {
                border: 1px solid black;
                height: 300px;
                padding: 10px;
            }

            div.innerDivA, div.innerDivB {
                border: 1px solid blue;
                float: left;
                width: 50%;
            }

            div.innerDivB {
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="outerDiv">
            <div class="innerDivA">content a</div>
            <div class="innerDivB">content b</div>
        </div>
    </body>
</html>

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

Возможно ли это с помощью CSS?

Ответы [ 4 ]

1 голос
/ 09 сентября 2011

Стремление к минимальной разметке понятно, но смешивание и сопоставление процентов и значений отдельных пикселей с различными блочными моделями не гарантируют согласованные результаты с вашей нынешней структурой.

Вы можете сделать это одним из следующих способов:

1) Добавить больше разметки HTML;Скрипка для иллюстрации: http://jsfiddle.net/kgosser/d4Q2D/

2) Будьте удобны с возможностью разрыва макета, если размер страницы падает ниже определенной ширины, например 400px

3) Делайте все с процентами и будьте удобныс заполнением, являющимся динамическим;Скрипка: http://jsfiddle.net/kgosser/EnSd2/

4) Используйте jquery для динамической настройки ширины, высоты и полей - особенно с использованием абсолютного и относительного позиционирования.

1 голос
/ 09 сентября 2011

Возможно, но я думаю, что у вас проблемы, потому что вы смешиваете процентные и пиксельные значения в CSS.Я изменил значение поля left-left на процентное значение, и оно, кажется, ведет себя немного лучше.

Fiddle Be Here: http://jsfiddle.net/QkSUN/1/

0 голосов
/ 09 сентября 2011

Как насчет этого: 

        div.outerDiv {
            border: 1px solid black;
            height: 300px;
            padding: 10px;
        }

        div.innerDivA, div.innerDivB {
            border: 1px solid blue;
            float: left;
            width: 49%;
        }

        div.innerDivB {
            margin-left: 10px;
        }

или заменить последний стиль на: 

       div.innerDivA {
            margin-right: 0.5%;
        }
        div.innerDivB {
            margin-left: 0.5%;
        }
0 голосов
/ 09 сентября 2011

Просто проверьте, решит ли это вашу проблему 

<html>
<head>
    <title>Relative Positioning Resize Demo</title>
    <style>
        div.outerDiv {
            border: 1px solid black;
            height: 300px;
            padding: 10px;
        }

        div.innerDivA, div.innerDivB {
            border: 1px solid blue;
            float: left;
            width: 50%;
        }
        div.innerDivB {
            margin-left: 10px; width: 48%;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDivA">content a</div>
        <div class="innerDivB">content b</div>
    </div>
</body>

...