5

探していたものを検索してみましたが、内部divでcss用のものを探し続けました。

とにかく、私がやろうとしているのは、divの2つの列を互いに整列させ、右側の列を常に左側の列の上部に整列させることです。これは私が空白を描いているところです、私はそれを行う方法を理解できないようです。

左側の列のサイズは動的であるため、：heightプロパティを使用して物事を整理することはできません。

これが私がやろうとしていることです：

ここに画像の説明を入力してください

4

7 に答える 7

5

できることは、インラインdivを透明なdivでラップすることです。例えば：

<div class="transparent-container">
    <div class="inline-div">
    </div>
    <div class="inline-div">
    </div>
    <div class="clearfix"></div>
</div>

これが動作中のJSFiddleです

于 2013-01-07T07:12:17.300 に答える
2

これは、次の3つの方法で実行できます。

  1. テーブルの使用：
<table>
    <tr>
        <td><div>div</div></td>
        <td><div>div</div></td>
    </tr>
    <tr>
       <td><div>div</div></td>
       <td><div>div</div></td>
    </tr>
</table>
  1. 以下のようにコンテナdivを使用します。
<div class="outer-container">
    <div class="box-container">
        <div class="left-box">
            Left Box content
        </div>
        <div class="right-box">
            Right Box Content
        </div>
    </div>
</div>
  1. JSの使用：

左ボックスのJsで高さを計算し、それを右ボックスに渡してギャップを維持します。

于 2013-01-09T13:01:42.810 に答える
1

これは非常に美しくトリックを行います：

.div1, .div2{
vertical-align:top;
}
.div1{
float:left;
width:70px;
}
.div2{
display: table-cell;
width:200px;
}
.div3{
display:table-cell;
width:200px;
}


<div class='div1'>1</div>
<div class='div2'>ABCDE FGHIJ KLMNO PQRST UVWXY Z</div>
<div class='div1'>2</div><div class='div2'>ABCDE FGHIJ KLMNO PQRST UVWXY Z</div>

等

于 2014-11-27T19:59:16.530 に答える
0

解決策1：テーブルを使用できます

解決策2：jQueryを使用して、各列を各divで取得し、それらの高さを取得します。次に、高さを比較し、両方のdivをその最大の高さに設定します。しかし、私はこれを解決するためにテーブルを使用することを好みます。

于 2013-01-07T07:07:00.107 に答える
0

以下のように作成できます。

ここに画像の説明を入力してください

つまり、すべての行でdivでラップし、そのdivには2つの列のdivがあります。後にクリアフロート

于 2013-01-07T07:12:24.710 に答える
0

同様の状況で私が行ったことは、2つの列を作成する代わりに、2 divの各行にコンテナーを作成し、コンテナー自体をフローティングせずに、そのコンテナーにdivをフロートすることでした。このようにして、コンテナの高さはdivの最高の高さまで拡張されます。次のコンテナはその下に配置されます。

ここで結果と私のHTMLを見ることができます。

于 2013-01-07T07:19:17.067 に答える
0

グリッドを作成したかったのですが、単純なテーブルとネストされたdivにより、一度に行をレイアウトする必要がありました。これにより、レスポンシブデザインのために列を積み重ねることが困難になりました。

これは、フレックスボックスを使用してグリッドを作成するコードペンです。1つ目は一度に行を指定でき、2つ目は一度に列を指定できます。

https://codepen.io/chaimleib/pen/zPPGgj

HTML：

<h2>By row</h2>
<div class="table table3cols">
  <div class="table-cell"><h3>Eddard Stark</h3></div>
  <div class="table-cell">Sword named Ice</div>
  <div class="table-cell">No direwolf</div>

  <div class="table-cell"><h3>Jon Snow</h3></div>
  <div class="table-cell">Sword named Longclaw</div>
  <div class="table-cell">Direwolf: Ghost</div>

  <div class="table-cell"><h3>Arya Stark</h3></div>
  <div class="table-cell">Sword named Needle</div>
  <div class="table-cell">Direwolf: Nymeria</div>
</div>

<h2>By column</h2>

<div class="table table3cols">
  <div style="order:1;" class="table-cell"><h3>Eddard Stark</h3></div>
  <div style="order:2;" class="table-cell">Sword named Ice</div>
  <div style="order:3;" class="table-cell">No direwolf</div>

  <div style="order:1;" class="table-cell"><h3>Jon Snow</h3></div>
  <div style="order:2;" class="table-cell">Sword named Longclaw</div>
  <div style="order:3;" class="table-cell">Direwolf: Ghost</div>

  <div style="order:1;" class="table-cell"><h3>Arya Stark</h3></div>
  <div style="order:2;" class="table-cell">Sword named Needle</div>
  <div style="order:3;" class="table-cell">Direwolf: Nymeria</div>
</div>

以下：

/* Variables
================================== */
@bw: 3px;  // border width

/* Tables
================================== */
.table {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0;
}
.table-cell {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;  // Default to full width
  padding: 0.8em 1.2em;
  overflow: hidden; // Or flex might break
  list-style: none;
  border: solid @bw white; // margins would overflow row and cause early wrapping
  background: fade(slategrey,20%);
  > h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
}

/* Table column sizing
================================== */
.table2cols > .table-cell  { width: 50%; }
.table3cols > .table-cell  { width: 33.33%; }
.table4cols > .table-cell  { width: 25%; }

/* Page styling
================================== */

body {
  border: 1px solid grey;
  margin: 0 auto;
  max-width: 800px;
  padding: 2em;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; }

このテクニックの功績は、デザインをレスポンシブにするための巧妙な方法も示しているDavideRizzoにあります。

于 2017-11-16T22:02:52.547 に答える