Позиционирование div, чтобы занимать 50% ширины

Question

Позиционирование div, чтобы занимать 50% ширины

0

Вот моя попытка продлить мою работу на скрипке.

Вот мой КОД.

HTML

<div id="updatepanel">
    <div id="accountpanel">BLAH BLAH BLAH BLAH BLAH BLAH</div>
    <div id="billingpanel">
         <h2>Billing Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
    <div id="shippingpanel">
        <h2>Shipping Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
</div>

Вот моя проблема. У меня есть торговый сайт, и это попытка воспроизвести страницу проверки. Я использую торговый модуль в CMS, и мой код создается динамически CMS. У меня есть ограниченный доступ к этому, но я могу возиться с CSS.

Теперь я хочу, чтобы панель Billing and Shipping была выровнена бок о бок, так что длина страницы была красной, и у конечного пользователя не так много прокрутки. Я попытался использовать "float: left" на обертке (updatepanel), но это просто не помогло.

MarsOne 21 март 2014, в 09:21

Источник

0

Просто добавь float: left?
Peter 21 март 2014, в 07:30
0

Жить это jsfiddle.net/WeTEp/1
Rohit Azad 21 март 2014, в 07:33

Теги:

html

css

6 ответов

0

Вы также можете использовать таблицы div. jsfiddle. Он более гибкий при проектировании.

<div id="updatepanel">
    <div id="billingpanel">
         <h2>Billing Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
    <div id="shippingpanel">
        <h2>Shipping Info</h2>
        <fieldset>
            <label>Name:</label>            
            <label>Surname:</label>
            <label>Address:</label>
            <label>Phone:</label>
        </fieldset>
    </div>
</div>

label{
    display:block;
}
#updatepanel{
    display:table;
    width: 100%;
}
#billingpanel{
    width:50%;    
    display:table-cell;"
}
#shippingpanel{
    width:50%;
    display:table-cell;"
}

Makla 21 март 2014, в 06:44

0

Вы должны плавать #shippingpanel и #billingpanel, а не #billingpanel. Тем не менее, вы должны убедиться, что после этого вы очистите поплавки, добавив :after псевдоэлемента, который их очистит: Обновлено Fiddle

#billingpanel{
    width:50%;
    float: left;    
}
#shippingpanel{
    width:50%;
    float: right;
}
#updatepanel:after {
    content: " ";
    display: table;
    clear: both;
    width: 0;
    height: 0;
}

rauberdaniel 21 март 2014, в 06:25

0

Дайте изменение на css. Одна ширина должна быть меньше, чем другая.

label{
    display:block;
}
#billingpanel{
    width:50%;   
    float:left;
}
#shippingpanel{
    width:49.9%;
    float:left;
}

http://jsfiddle.net/WeTEp/13/

Abhishek 21 март 2014, в 05:30

0

CSS

label{
    display:block;
}
#billingpanel{
    width:49%;
    float:left;    
}
#shippingpanel{
    width:49%;
    float:left;
}

Обновленный скрипт

Kawinesh SK 21 март 2014, в 05:01

0

Сделав это, вы получите 2% места справа от #shippingpanel .
rauberdaniel 21 март 2014, в 07:36

0

Мне нравится устанавливать максимальный контент incase внутри, растягивает div и помещает макет;

label{
    display:block;
}
#billingpanel{
    width:50%;  
    maximum-width: 50%;
    float: left;
}
#shippingpanel{
    width:50%;
    maximum-width: 50%;
    float: left;
}

flauntster 21 март 2014, в 04:43

1

Содержимое внутри не может растягивать div, если его ширина указана явно.
rauberdaniel 21 март 2014, в 07:35
0

Вы правы ... я думаю, что у меня появилась эта привычка работать со старыми браузерами. спасибо за разъяснение :)
flauntster 21 март 2014, в 07:41

Ещё вопросы

Сделав это, вы получите 2% места справа от #shippingpanel .
Содержимое внутри не может растягивать div, если его ширина указана явно.
Вы правы ... я думаю, что у меня появилась эта привычка работать со старыми браузерами. спасибо за разъяснение :)

Umair Hafeez · Accepted Answer · 2014-03-21T04-57-00.000Z

Ознакомьтесь с обновленной скриптой здесь.

CSS:

label{
    display:block;
}
#billingpanel{
    width:50%;
    float: left;    
}
#shippingpanel{
    width:50%;
    float: right;
}