Два дива бок о бок-жидкий дисплей

Question

Два дива бок о бок-жидкий дисплей

Я пытаюсь разместить два дива бок о бок и использовать для этого следующий CSS.

#left {

  float: left;

  width: 65%;

  overflow: hidden;

}



#right {

  overflow: hidden;

}

HTML-код простой, два левый и правый див в див-обертку.

<div id="wrapper">

  <div id="left">Left side div</div>    

  <div id="right">Right side div</div>

</div>

Я так много раз пытался найти лучший способ на StackOverflow и других сайтах тоже, но не смог найти точную помощь.

Итак, код отлично работает на первый взгляд. Проблема в том, что левый div получает заполнение/маржу автоматически, когда я увеличиваю ширину (%). Итак, в 65 лет% ширина, левый div имеет некоторое заполнение или поле и не идеально выровнен с правым div, я попытался заполнить/поле 0, но не повезло. Во-вторых, если я увеличу страницу, правый div скользит ниже левого div, его как не жидкий дисплей.

Примечание: извините, я искал много. Этот вопрос задавался много раз, но эти ответы не помогают мне. Я объяснил, в чем проблема в моем случае.

Я надеюсь, что есть исправление для что.

спасибо.

EDIT: Извините, у меня проблема HTML, было два "бокса" divs как с левой, так и с правой стороны, у них было заполнение в%, Поэтому левая сторона показала больше заполнения из-за большей ширины. Извините, приведенный выше CSS работает идеально, его жидкий дисплей и фиксированный, извините за неправильный вопрос...

451 3

html css fluid

3 ответов:

Comments

Ничего не найдено.

dezman · Accepted Answer · 2017-02-02 05:56:20

Скрипка

вместо этого попробуйте такую систему:

HTML:
<section class="container">
    <div class="one"></div>
    <div class="two"></div>
</section>
CSS:
.container {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}
.one {
    width: 15%;
    height: 200px;
    background: red;
    float: left;
}
.two {
    margin-left: 15%;
    height: 200px;
    background: black;
}
вам нужно только плавать один div, если вы используете margin-left на другом, равном ширине первого div. Это будет работать независимо от того, что зум и не будет иметь субпиксельных проблем.

score 125 · Accepted Answer · 2015-12-28 03:11:09

Это легко с flexbox:

#wrapper {
  display: flex;
}
#left {
  flex: 0 0 65%;
}
#right {
  flex: 1;
}

Waleed · Accepted Answer · 2013-08-13 20:08:01

используя этот CSS для моего текущего сайта. Он работает идеально!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 