Создан Div Стандарт из 3 столбцов с CSS

0

Я новый дизайнер веб-сайта. я хотел бы создать веб-сайт, который разделен на 3 столбца, когда я сниму свой сайт с помощью Firefox и Chrome, у него нет никаких проблем; однако, когда я уменьшаю масштаб с помощью Safari, у него есть пробелы между правыми и средними. пожалуйста, помогите мне исправить это. мой скрипт css, как показано ниже:

div#left{
    float: left;
    width: 205px;
    max-width:205px;
    background-color:#999;
    height:200px;
}

div#middle{
    float:left;
    max-width:555px;
    width: 555px;
    background-color:#366;
}
div#right{
    float: right;
    width: 200px;
    max-width:200px;
    background-color:#F00;
    height:200px;
}
div#content{
    width: 960px;
    margin-top: 0 auto;
    white-space:nowrap;
}

Мой HTML

       <div id="content">
                         <div id="left"> 
                            Test
                         </div>
                         <div id="middle">
                          Middle
                         </div>
                         <!--white space here when zoom out in safari-->
                         <div id="right">Right</div>  
             </div>

Как установить сафари?

Теги:

7 ответов

0
Лучший ответ

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

div#right{
    float: left;
    width: 200px;
    max-width:200px;
    background-color:#F00;
    height:200px;
}

но это оставит вам пробел с правой стороны.

вы можете исправить это, сделав левый средний и правый проценты. так что он примет длину своего родителя.

div#left{
    float: left;
    width: 25%;
    background-color:#F00;
    height:200px;
}
div#middle{
    float: left;
    width: 50%;
    background-color:#F00;
    height:200px;
}
div#right{
    float: left;
    width: 25%;
    background-color:#F00;
    height:200px;
}
Поделиться
  • 0
    Да, у него есть пробелы справа от div right. так может показать ваш CSS исправлено?
  • 0
    Вы можете использовать CSS, который я разместил сверху. сделав это в процентах, вы бы динамически приняли ширину вашего родительского элемента div. Вы можете просто настроить процент желаемой ширины в каждом div.
Показать ещё 1 комментарий
0

здесь [проверено] только что изменилось hleft => left и hcontent => content

    <style>
div#left{
    float: left;
    width: 205px; 
    background-color:#999;
    height:200px;
}

div#middle{
    float:left; 
    width: 555px;
    background-color:#366;
}
div#right{
    float: left;
    width: 200px; 
    background-color:#F00;
    height:200px;
}
div#content{
    width: 960px;
    margin: 0 auto;
    white-space:nowrap;
}
</style>
 <div id="content">
                         <div id="left"> 
                            Test
                         </div>
                         <div id="middle">
                          Middle
                         </div>
                         <!--white space here when zoom out in safari-->
                         <div id="right">Right</div>  
             </div>
Поделиться
  • 0
    это все тот же результат.
  • 0
    @ user3539827 Я только что обновил коды, теперь так, как вы хотите
Показать ещё 4 комментария
0

Добавьте float: слева направо div и исправьте имена классов.

DEMO

HTML

<div id="hcontent">
    <div id="hleft">Test</div>
    <div id="middle">Middle</div>
    <!--white space here when zoom out in safari-->
    <div id="right">Right</div>
</div>

CSS

div#hcontent {
    margin: 0 auto;
    width:960px;
}
div#hleft {
    float: left;
    width: 205px;
    max-width:205px;
    background-color:#999;
    height:200px;
}
div#middle {
    float:left;
    max-width:555px;
    width: 555px;
    background-color:#366;
}
div#right {
    float: left;
    width: 200px;
    max-width:200px;
    background-color:#F00;
    height:200px;
}
Поделиться
0 
<div id="hleft">  &amp  <div id="hcontent">

должно быть:

<div id="left">  &amp  <div id="content">
Поделиться
  • 1
    Escape & as & amp;
0

Используйте процент для ширины (20%, 60%, 20%).

div#left{
    float: left;
    width: 20%;
    background-color:#999;
    height:200px;
}

div#middle{
    float:left;
    width: 60%;
    background-color:#366;
}
div#right{
    float: right;
    width: 20%;
    background-color:#F00;
    height:200px;
}

скрипка

Поделиться
0

Я сделал это для вас. Это может помочь.

Санти избил меня. В основном то же самое, но с добавлением класса.clearfix, чтобы избавиться от любых других лишних пробелов, которые могут появиться из-за плавающих элементов.

Я бы рекомендовал отказаться от пиксельных единиц. Попробуйте поэкспериментировать проценты или что-то масштабируемое как rem или em units.

HTML

<div id="content">
    <div id="left">Left</div>
    <div id="middle">Middle</div>
    <!--white space here when zoom out in safari-->
    <div id="right">Right</div>
    <div class="clearfix"></div>
</div>

CSS

#content{
    width: 900px;
    margin: 0 auto;
    white-space:nowrap;
}

#left{
    float: left;
    width: 200px;
    min-height:200px;
    background-color:#999;
}

#middle{
    float:left;
    width: 500px;
    min-height: 200px;
    background-color:#366;
}

#right{
    float: left;
    width: 200px;
    min-height: 200px;
    background-color:#F00;
}

.clearfix{
    clear: both;
}

JSFiddle

http://jsfiddle.net/LVLMz/

Поделиться
  • 0
    это все то же самое.
0

ДЕМО с шириной px

DEMO с шириной%

Ваш "контент" div, похоже, не находится в вашем HTML-коде. Если вы имеете в виду контент hcontent ==, то есть проблема с вашей шириной. У вас есть ширина, равная 100%, для родительского блока "hcontent", а дочерний div только что позиционируется с поплавком и имеет ширину, установленную в px. Вам нужно изменить стиль hcontent на фиксированную ширину в px или изменить дочерний div на ширину в процентах.

Вы можете попробовать что-то вроде этого:

div#left{
    float: left;
    width: 205px;
    max-width:205px;
    background-color:#999;
    height:200px;
}

div#middle{
    float:left;
    max-width:555px;
    width: 555px;
    background-color:#366;
}
div#right{
    float: right;
    width: 200px;
    max-width:200px;
    background-color:#F00;
    height:200px;
}
div#content{
    width: 960px;
    margin: auto;
    white-space:nowrap;
}

Как вы можете видеть, я только что изменил ширину и маржу вашего контента на "авто", чтобы он всегда располагался в центре. Так или иначе:

div#left{
    float: left;
    width: 30%;
    background-color:#999;
    height:200px;
}

div#middle{
    float:left;
    width:40%;
    background-color:#366;
}
div#right{
    float: right;
    width: 30%;
    background-color:#F00;
    height:200px;
}
div#content{
    width: 100%;
    margin: auto;
    white-space:nowrap;
}

Обратите внимание, что я изменил всю свою ширину div на процентное значение.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню