0

2 つの div を含む html ページがあり、サイズを変更する必要がありますが、常に 1 行のままです。どうすればこれを構築できますか?

次の例の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;
}
4

5 に答える 5

1

コンテンツの css を次のように変更します

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

ただし、ここではテーブル幅が 100% に設定されているため、メイン div は同じ行で 170px を受け入れる方法です。

#table が 81% を超えると、コンテンツが次の行にプッシュされます

于 2013-09-20T10:02:29.373 に答える
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>
于 2013-09-20T10:02:22.217 に答える
0

#content の幅を 100% に設定しているため、スペース全体が必要になります。div の幅とフロート #content の両方を左に調整して、計算が 100% になるようにする必要があります。

于 2013-09-20T10:02:04.940 に答える
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;
}
于 2013-09-20T10:04:53.813 に答える