Два элемента div должны оставаться в одном ряду

Question

Два элемента div должны оставаться в одном ряду

0

У меня есть html-страница с 2 divs, и они должны изменить размер, но всегда оставаться в одной строке. Как я могу это построить?

У меня есть следующий пример html-кода:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
  <div id="table">
  <table>
    <tr>
      <td>ONE</td>
      <td>TWO</td>
    </tr>
  </table>
  </div>
  <div id="sidebar">
    <p>This is a sidebar</p>
  </div>
</div>
</body>
</html>

И таблица стилей выглядит так:

#content {
  width: 100%;
}

#table {
  width: 100%;
  background-color: red;
  display: inline-block;
}

#sidebar {
  width: 170px;
  background-color: blue;
  float: right;
  display: inline-block;
}

patrickS 20 сен. 2013, в 12:29

Источник

Теги:

html

css

5 ответов

1

Измените содержимое css на

#content {
width: 100%;
display:inline-block;
}

но здесь, когда ваша ширина таблицы установлена на 100%, как главный div примет 170px в той же строке.

после #table превышает 81%, это подталкивает содержимое к следующей строке

Vinay Pratap Singh 20 сен. 2013, в 08:43

0

Посмотрите эту скрипку... Это помогает достичь того, что вам нужно.

Здесь обновляется css..

#content {
  width: 100%;
}

#table {
    float: left;
  background-color: red;
  display: inline-block;
    width: 60%;
}

#sidebar {
    float: left;
  width: 170px;
  background-color: blue;
  float: right;
  display: inline-block;
}

nik 20 сен. 2013, в 08:28

0

Спасибо, но в этом примере таблица не использует все пространство. Я также хочу, чтобы боковая панель и стол заполняли все горизонтальное пространство.
patrickS 20 сен. 2013, в 10:21

0

Float:left;

для обоих div, а затем поместите их в обертку, а затем размер обертки, чтобы вы хотели, чтобы он выглядел.

.wrap {

 width: 500px;
 height:800px;
}

Итак, для вашего кода CSS:

#content {
  width: 100%;
}
#wrap {
  height: 100%;
  width: 100%;
}
#table {
  width: 60%;
  background-color: red;
  display: inline-block;
  float: left;
}
#sidebar {
 width: 170px;
 background-color: blue;
 float: right;
 display: inline-block;
 float: left;
}

HTML:

<body>
<div id="wrap">
<div id="content">
  <div id="table">
  <table>
    <tr>
      <td>ONE</td>
      <td>TWO</td>
    </tr>
  </table>
  </div>
  <div id="sidebar">
    <p>This is a sidebar</p>
  </div>
</div>
</div>
</body>

Ruddy 20 сен. 2013, в 07:28

0

Вы даете #content ширину 100%, так что это займет все пространство. Вам нужно будет настроить как ширину div, так и float #content налево, чтобы она вычислялась до 100%.

Ganesh Pandhere 20 сен. 2013, в 07:03

Ещё вопросы

Спасибо, но в этом примере таблица не использует все пространство. Я также хочу, чтобы боковая панель и стол заполняли все горизонтальное пространство.

Marc Audet · Accepted Answer · 2013-09-20T08-02-00.000Z

Использование float и функции calc()

Вот один из способов сделать это с помощью float и функции calc() (CSS3):

#content {
  width: 100%;
  border: 1px dotted gray;
  overflow: auto; /* useful for enclosing the floated region */
}
#table {
  float: left;
  width: calc(100% - 170px); /* modern but not yet widely supported */
  background-color: red;
}
#table table {
  border: 1px solid yellow;
  width: 100%; /* '100%' for full-width; 'auto' for shrink-to-fit content */
}
#sidebar {
  float: right;
  width: 170px;
  background-color: blue;
}

#table и #sidebar влево и вправо соответственно.

Когда вы плаваете элемент, его значение будет вычисляться до значения shrink-to-fit, если вы не укажете значение ширины.

Если вы укажете width: 100% на #table, это заставит боковую панель начать работу на новой строке.

Чтобы обеспечить пространство для боковой панели, используйте calc(100% - 170px) для компьютера идеальную максимальную ширину для панели стола.

Функция calc() поддерживается новейшими браузерами, поэтому это решение может оказаться неприемлемым.

См. Демо-скрипт