Разделение двух делений с помощью CSS - PullRequest
Новая
       7

Разделение двух делений с помощью CSS

5 голосов
/ 23 сентября 2011

Скажем, у меня есть два деления A и B, которые в настоящее время выровнены рядом. Как я могу заставить A отделиться от B на 50px, в то же время позволяя A занять 70% оставшегося пространства и B оставшиеся 30%?

РЕДАКТИРОВАТЬ: принял ответ немного раньше, чем я на самом деле попытался. Упс.

JSFiddles:

Сказка о двух делах

Теперь разделены , но теперь со вторым во второй строке?

Ответы [ 5 ]

6 голосов
/ 23 сентября 2011

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

<html>
<head>
    <style type="text/css">
        #Content
        {
            border: 3px solid blue;
            position: relative;
            height: 300px;
        }

        #divA
        {
            border: 3px solid red;
            position: absolute;
            margin-right: 25px;
            left: 5px;
            top: 5px;
            bottom: 5px;
            right: 70%;
        }

        #divB
        {
            border: 3px solid green;
            position: absolute;
            right: 5px;
            top: 5px;
            bottom: 5px;
            left: 30%;
            margin-left: 25px;
        }
    </style>
</head>
<body>
    <div id="Content">
        <div id="divA">
        </div>
        <div id="divB">
        </div>
    </div>
</body>
</html>
3 голосов
/ 23 сентября 2011

Я полагаю, что выбранный вами ответ не будет работать:

http://jsfiddle.net/cNsXh/

edit:
Извините, приведенный выше пример сначала не был корректным.Теперь это.
/ edit

Как видите, div #b переместится под div #a, потому что margin-left (или padding-left) будет добавлено к30%.И поскольку здесь мы смешиваем процентное соотношение со значениями в пикселях, мы не сможем определить значения, которые гарантированно всегда будут составлять ровно 100%.

Вам потребуется использовать обертку для div #bкоторая будет иметь 30% ширину и не будет определять ширину для div #b, а будет определять margin-left.Поскольку div является блочным элементом, он автоматически заполнит оставшееся пространство внутри div-оболочки:

http://jsfiddle.net/k7LRz/

Таким образом, вы обойдете возможности CSS <3 блочной модели, которыекак ни странно, это было определено так, что определение размера (ширина / высота) НЕ вычтет поля и / или отступы и / или ширину границы. <br>Я полагаю, что блочная модель CSS 3 предоставит здесь более гибкие параметры.Но, по общему признанию, я еще не уверен насчет кросс-браузерной поддержки этих новых функций.

3 голосов
/ 23 сентября 2011

просто установите поля слева или отступ слева от div B

2 голосов
/ 23 сентября 2011

@ wrongusername;я знаю, что вы принимаете этот ответ, но вы также можете проверить это решение, в этом вам не нужно давать дополнительные mark-up, а если вы дадите padding своему div, это не повлияет на структуру.

ПРОВЕРЬТЕ ЭТОПРИМЕР: http://jsfiddle.net/sandeep/k7LRz/3/

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

http://jsfiddle.net/efortis/HJDWM/

#divA{ 
    width: 69%;  
}
#divB{ 
    width: 29%; 
    margin-left: 2%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...