Не в состоянии устроить два деления рядом

Question

Не в состоянии устроить два деления рядом

Хорошо, я знаю, что в Stackru есть несколько вопросов, похожих на этот, но они мне не помогли.

Я создаю службу обмена сообщениями, и для этого у меня есть два div, contacts_box (300 пикселей) и message_box (500px). Они оба завернуты в родителя div который 800px в width, я хочу align эти двое divs бок о бок внутри родителя div, Но независимо от того, что я делаю, я просто не могу заставить их выровняться!

Пожалуйста, посмотрите на мои HTML и CSS и покажите, где я ошибаюсь?

* {
    margin: 0;
    padding: 0;
}
.page_layout {
    position: fixed;
    top: 50px;
    width: 100%;
    height: 100%;
    border: 1px solid green;
}
.page_container {
    width: 800px;
    height: 100%;
    margin: 0 auto;
    clear: both;
    border: 1px solid blue;
}
// Contacts Box and its elements  
.contacts_box {
    float:left;
    height:100%;
    width:300px;
    border:1px dashed magenta;
}
// Message Box and its elements
.message_box {
    float:right;
    height:100%;
    width:500px;
    border:1px dashed lemonchiffon;
}

<html>
  <head>
   <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>
<body>
<div class="page_layout">
  <div class="page_container">
    <div class="contacts_box"> CONTACTS BOX </div>
    <div class="message_box">
      <div class="message_displayBox"> Message Box </div>
      <div class="message_textBox"> </div>
    </div>
  </div>
</div>
</body>
</html>

1

html css css-position css-float box-sizing

Источник

user4043396 02 сен '16 в 05:09

10 ответов

Решение

Самое основное решение: граница div не включена в ширину. Так что вам либо нужно рассчитать ширину как

width1 + border1 + width2 + border2 = 800px

или увеличьте размер контейнера.

2

Источник

user6733572 02 сен '16 в 05:16

Проблема: у вас есть границы в обоих элементах (.contact_box а также .message_box) и они берут по 1 пикселю с каждой стороны, поэтому они никогда не будут совмещаться, потому что не хватает места, я рекомендую вам использовать свойство box-sizing:border-box; в этом случае он будет вставлять границы элемента вместо внешних, поэтому вам не придется беспокоиться о них.

.contacts_box
{
  float:left;
  height:100%;
  width:300px;
  border:1px dashed magenta;
  box-sizing: border-box;
}

.message_box
{
  float:right;
  height:100%;
  width:500px;
  border:1px dashed lemonchiffon;
  box-sizing: border-box;
}

Также, если вы используете чистый CSS (без препроцессоров), используйте такие комментарии /* Comment */ чтобы избежать проблем.

1

Источник

user5711480 02 сен '16 в 05:27

Поместите ваши комментарии внутри /* Comments Goes Here */

измени свою ширину px в % и использовать box-sizing: border-box; в плавающие дивы.

*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}

.contacts_box
{
  float:left;
  height:100%;
  width:40%;
  border:1px dashed magenta;
  box-sizing: border-box;
}

.message_box
{
  float:right;
  height:100%;
  width:60%;
  border:1px dashed lemonchiffon;
  box-sizing: border-box;
}

<div class="page_layout">
    <div class="page_container">
        <div class="contacts_box">
            CONTACTS BOX
        </div>
        <div class="message_box">
            <div class="message_displayBox">
                Message Box
            </div>
            <div class="message_textBox">
            </div>
        </div>
    </div>
</div>

1

Источник

user5336321 02 сен '16 в 05:25

Вы даете границу внутреннему DIV, поэтому его также добавьте в его фактическую ширину. Поэтому, если возможно, задайте цвет внутреннего DIV или увеличьте ширину родительского DIV.

* {
  margin: 0;
  padding: 0;
}
.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}
.page_container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  clear: both;
  border: 1px solid blue;
}
.contacts_box {
  float: left;
  height: 100%;
  width: 300px;
  background: blue;
}
.message_box {
  float: right;
  height: 100%;
  width: 500px;
  background: red;
}

<html>

<head>
  <link rel="stylesheet" href="http://kinskeep.com/test.css">
</head>

<body>
  <div class="page_layout">
    <div class="page_container">
      <div class="contacts_box">
        CONTACTS BOX
      </div>

      <div class="message_box">
        <div class="message_displayBox">
          Message Box
        </div>

        <div class="message_textBox">
        </div>

      </div>
    </div>
  </div>

</body>

</html>

ПРИМЕЧАНИЕ: ваш код правильный, но вы даете неправильный комментарий в CSS. Вот почему это не работает. Пожалуйста, проверьте комментарий в части CSS. Здесь я обновляю ваш код удалением комментария. Работает нормально.

ОБНОВИТЬ

Также вы можете использовать box-size:border-box external DIV и box-size:content-box для внутреннего DIV. Вы можете решить это, используя этот метод также.

0

Источник

user4528301 02 сен '16 в 05:28

Ваш метод комментария был неправильным. в ванильном CSS - мы используем /* Your comment */ комментировать.

// - поддерживается в препроцессорах типа LESS, SASS, Stylus.

Если вы запустите свой код в браузере, вы увидите, что ни один из CSS для contactbox и messagebox не работал.

*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}

/* Contacts Box and its elements */

.contacts_box
{
  float:left;
  height:100%;
  width:300px;
  border:1px dashed magenta;
}

/* Message Box and its elements */

.message_box
{
  float:right;
  height:100%;
  width:500px;
  border:1px dashed lemonchiffon;
}

<html>
  <head>
    <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>  
  
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div class="contacts_box">
      CONTACTS BOX
     </div>
    
     <div class="message_box">
      <div class="message_displayBox">
       Message Box
      </div>
      
      <div class="message_textBox">
      </div>
      
     </div>
    </div>
   </div>

  </body>
</html>

0

Источник

user2032598 02 сен '16 в 05:22

Мы должны перестать использовать поплавки и начать использовать flex!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

.page_container {
  display: flex;
  flex-direction: row;
  width: 800px;
  height: 100%;
  margin: 0 auto;
  border: 1px solid blue;
}

.contacts_box {
  flex: 1 0 300px;
  border: 1px dashed magenta;
}

.message_box {
  flex: 1 0 500px;
  border-left: 1px dashed lemonchiffon;
}

<div class="page_layout">
  <div class="page_container">
    <div class="contacts_box">
      CONTACTS BOX
    </div>

    <div class="message_box">
      <div class="message_displayBox">
        Message Box
      </div>

      <div class="message_textBox">
      </div>

    </div>
  </div>
</div>

0

Источник

user1938881 02 сен '16 в 06:38

<html>
  <head>
    <link rel="stylesheet" href="http://kinskeep.com/test.css">
  </head>  
  <style>
*{
    margin:0;
    padding:0;
}

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;
}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid blue;
}



.contacts_box {
    float: left;
    height: 100%;
    width: 298px;
     border: 1px dashed magenta;
}


.message_box {
    float: right;
    height: 100%;
    width: 498px;
     border: 1px dashed lemonchiffon; 
}
</style>
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div class="contacts_box">
      CONTACTS BOX
     </div>
     <div class="message_box">
      <div class="message_displayBox">
         Message Box
      </div>
      <div class="message_textBox">
      </div>

     </div>
    </div>
   </div>

  </body>
</html>
</html>

Если вы хотите добавить рамку, то уменьшите ширину на тот же пиксель, который вы принимаете, например, сделайте их 498 и 298 пикс.

-1

Источник

user3185267 02 сен '16 в 05:20

Ваш контейнер с шириной:300px и границей:1px в целом имеет ширину 301px. Попробуйте изменить ширину до 299 пикселей или увеличить размер окна до 802 пикселей

-1

Источник

user2721510 02 сен '16 в 05:17

<html>
  <head>
     <style>

.page_layout
{
  position:fixed;
  top:50px;
  width:100%;
  height:100%;
  border:1px solid green;

}

.page_container
{
  width:800px;
  height:100%;
  margin: 0 auto;
  clear:both;
  border:1px solid green;
}

#contacts_box
{
  float:left;
  height:100%;
  width:300px !important;
  background-color:#f9dada !important;
}


#message_box
{
  float:left;
  height:100%;
  width:500px;
  background-color:#deffe5;
}
</style>
  </head>  
  
  <body>
    <div class="page_layout">
    <div class="page_container">
     <div id="contacts_box">
      CONTACTS BOX
     </div>
    
     <div id="message_box">
      Message Box
      
     </div>
    </div>
 </div>

  </body>
</html>

-2

Источник

user5935830 02 сен '16 в 05:36

Другие вопросы по тегам html css css-position css-float box-sizing

user6231153 02 сен '16 в 05:24 2016-09-02 05:24 · Accepted Answer · 2016-09-02 05:24

Ты можешь использовать box-sizing чтобы решить проблему, а не вычислять ширину и ширину границы:

добавлять box-sizing: border-box к внутренним контейнерам и box-sizing: content-box к внешнему контейнеру и там вы идете!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page_layout {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}
.page_container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
  clear: both;
  border: 1px solid blue;
  box-sizing: content-box;
}
 .contacts_box {
  float: left;
  height: 100%;
  width: 300px;
  border: 1px dashed magenta;
}
 .message_box {
  float: right;
  height: 100%;
  width: 500px;
  border: 1px dashed lemonchiffon;
}

<body>
  <div class="page_layout">
    <div class="page_container">
      <div class="contacts_box">
        CONTACTS BOX
      </div>

      <div class="message_box">
        <div class="message_displayBox">
          Message Box
        </div>

        <div class="message_textBox">
        </div>

      </div>
    </div>
  </div>

</body>