divレイアウトのラベルを整列する方法

Question

私はhtml tableを持っています。これは映画に関する情報を表示しています。

応答性のため、このtableをdivに変更しようとしています。テーブルを使ってウィンドウを縮小すると、テキストが重なります。

この

は私のテーブルです：私は、変換の多くを行うことができたのdivと

.label{ 
 
    font-weight: bold; 
 
    text-align: right; 
 
} 
 

 
.blue-box{ 
 
    background-color: green 
 
}

<div class="blue-box"> 
 
<table> 
 
<tr> 
 
    <td class="label">Nome:</td> 
 
    <td>Del Toro</td> 
 
    <td class="label">Data de cadastro:</td> 
 
    <td>19/05/2017</td> 
 
    <td class="label">Data de atualizacao:</td> 
 
    <td>19/05/2017</td> 
 
</tr> 
 
<tr> 
 
    <td class="label">Categoria de produto:</td> 
 
    <td>Diverso</td> 
 
    <td class="label">Ultimo Prêmio:</td> 
 
    <td>Leão De Ouro</td> 
 
    <td class="label">Filme Indicado</td> 
 
    <td>Shape of Water</td> 
 
</tr> 
 
</table> 
 
<div> 
 

 
</div>

が、ラベル自体に、私が整列する方法を把握することはできません私はテーブルレイアウトを使用するときのようなラベル：

.label{ 
 
    font-weight: bold; 
 
    float: left; 
 
    text-align: right; 
 
    display: inline; 
 
    margin-right: 5px 
 
} 
 

 
.blue-box{ 
 
    background-color: aquamarine; 
 
    overflow: hidden; 
 
} 
 

 
.father{ 
 
    float: left; 
 
    margin: 0px 5px 0px 5px ; 
 
} 
 

 
.content{ 
 
    float: left; 
 
    display: inline; 
 
}

<div class="blue-box"> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Nome: 
 
    </div> 
 
    <div class="content"> 
 
    Del Toro 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Data de cadastro: 
 
    </div> 
 
    <div class="content"> 
 
    19/05/2017 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Data de atualizacao: 
 
    </div> 
 
    <div class="content"> 
 
    19/05/2017 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Categoria de produto: 
 
    </div> 
 
    <div class="content"> 
 
    Diverso 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Ultimo Prêmio: 
 
    </div> 
 
    <div class="content"> 
 
    Leão de Ouro 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Filme indicado: 
 
    </div> 
 
    <div class="content"> 
 
    Shape of water 
 
    </div> 
 
</div> 
 
</div>

私は行方不明ですHTMLだけでこれを達成する方法はありませんか？

Answer 1

まず、レスポンスがあなたの後ろのものなら、レスポンシブなフレームワーク、BoostrapまたはMaterial UI（フレックスボックスベース）を採用する方法を見つける必要があります。これにより、さまざまな問題点が解決されます。スタイルシートをメディアクエリで膨らませることなくビューポートを作成できます。次に、コンテナの区画化を可能にするためにHTMLを変更する必要があります。反応性は、区画化と特異性を使用するときに最も効果的です。ここで

は例here in my CODEPENを参照してください、私はあなたのHTMLを手直しし、CSSのかなりの量

.row { 
 
    width: 100%; 
 
    display: inline-block; 
 
    margin: 10px auto; 
 
    background: green; 
 
} 
 

 
.col4 { 
 
    display: inline-block; 
 
    width: 33.33333333%; 
 
    margin: 1% 0 1% 0; 
 
    position: relative; 
 
    padding-right: 15px; 
 
    float: left; 
 
    padding-left: 15px; 
 
    min-height: 1px; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.col4 div{ 
 
    display: inline-block; 
 
} 
 

 
label{ 
 
    display: inline-block; 
 
    max-width: 100%; 
 
    margin-bottom: 5px; 
 
    font-weight: 700; 
 
}

<div class="row"> 
 
    <div class="col4"> 
 
    <div> 
 
     <label>Nome:</label> 
 
     <span>Del Toro</span> 
 
    </div> 
 
    <div> 
 
     <label>Categoria de produto:</label> 
 
     <span>Diverso</span> 
 
    </div> 
 
    </div> 
 
    <div class="col4"> 
 
    <div> 
 
     <label>Data de cadastro:</label> 
 
     <span>19/05/2017</span> 
 
    </div> 
 
    <div> 
 
     <label>Ultimo Prêmio:</label> 
 
     <span>Leão De Ouro</span> 
 
    </div> 
 
    </div> 
 
    <div class="col4"> 
 
    <div> 
 
     <label>Data de atualizacao:</label> 
 
     <span>19/05/2017</span> 
 
    </div> 
 
    <div> 
 
     <label>Filme Indicado:</label> 
 
     <span>Shape of Water</span> 
 
    </div> 
 
    </div> 
 
</div>

との整合の問題を解決する方法である（ちょうどあなたのHTML内の値を変更する）

今、here is one with Bootstrapです。追加のメディアクエリーを行わずに、私がどのように同じことを作り出し、ITが反応するかをチェックしてください。ただ、container、row、およびcol-xs-12 col-sm-4をクラスを使用して

ブートストラップは非常に、ネブラスカhere

MUITOのFACILを文書化しています！

Answer 2

.blue-box{ 
 
    background: green; 
 
    padding: 1rem; 
 
} 
 
.father{ 
 
    display: inline-block; 
 
    margin: .5rem; 
 
} 
 
.label{ 
 
    font-weight: bold; 
 
    float: left; 
 
    width: 80px; 
 
} 
 
.content{ 
 
    float: left; 
 
    width: 70px; 
 
}

<div class="blue-box"> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Nome: 
 
    </div> 
 
    <div class="content"> 
 
    Del Toro 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Data de cadastro: 
 
    </div> 
 
    <div class="content"> 
 
    19/05/2017 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Data de atualizacao: 
 
    </div> 
 
    <div class="content"> 
 
    19/05/2017 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Categoria de produto: 
 
    </div> 
 
    <div class="content"> 
 
    Diverso 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Ultimo Prêmio: 
 
    </div> 
 
    <div class="content"> 
 
    Leão de Ouro 
 
    </div> 
 
</div> 
 
<div class="father"> 
 
    <div class="label"> 
 
    Filme indicado: 
 
    </div> 
 
    <div class="content"> 
 
    Shape of water 
 
    </div> 
 
</div> 
 
</div>

Answer 3

あなたはDIVとCSSを使用してテーブルとほぼ同じ結果を得ることができ、

<div style="display: table;"> 
    <div style="display: table-row;"> 
    <div style="display: table-cell;"> 
     Gross but sometimes useful. 
    </div> 
    </div> 
</div> 

がhttps://css-tricks.com/almanac/properties/d/display/

を見て、これを使用する利点は、ということですこのように設定されているような縦向きのようないくつかの追加機能があります。

このようなコードに変更する場合は、私にバズを与えてください。