ブラウザが小さくなったときにCSSの浮動小数点数の動作を変更します。

Question

cssとhtmlで見栄えの良いリストを作成しようとしています。私はそこに名前とその写真を持つ人々の束をリストしたいと思います。

私がこれをしたのは、各要素を左に浮かべてから、スペースを正しく取るためにタイトルに小さな余白を設定することです。問題は、名前と画像がタイトルの上に画像を移動する同じ行に収まらないという点にブラウザが凝縮されている場合です。

代わりに名前と写真を整列できるように名前の下に姓を入れています。これどうやってするの？

Answer 1

これはうまくいくはずです。画面を縮小すると自動的にテキストの幅が制限され、自動的に折り返されます。コードサンプルを見ることはできますか？ https://jsfiddle.net/bb3a5wbu/

HTML

<div class="image"></div> 
<p class="name">FirstName LastName</p> 

CSSこのことができます

.image { 
    width: 75px; 
    height: 75px; 
    background: grey; 
    float: left; 
} 

.name { 
    margin-left: 90px; 
} 

希望：

はここで働いてフィドルです。