2017-12-20 5 views
0

ブートストラップを使用して階段レイアウトを作成できますか?私はブートストラップを使用して階段状のレイアウトを作りたい

stair-like layout

これを構築するためには、私は、これは動作しません知っている

コードの下
<div class="col-md-6 pull-left col-sm-12">...(img)...</div> 
<div class="col-md-6 col-sm-12">....aaaaa.....</div> 

を使用しますが、私はすることができますブートストラップを使ってそのようなレイアウトを作るのですか?

+1

代わりにユーザーをリダイレクトする、ここで画像を追加するには、編集してください。 –

+1

その「レイアウト」を作成するためには、画像はテキスト要素の中にある**テキスト要素と浮動小数点でなければなりません。以下のNikhil Eshvarの答えを参照してくださいHTML要素は**常に**長方形です(ただし、 look *他)。テキストはフローティングされた要素の周りを流れます –

+0

いつも長方形です..いつか変更されることを願っています。ありがとうございます –

答えて

1

このような意味ですか?

img { 
 
    float: left; 
 
}
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<p> 
 
<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla vehicula arcu, vitae eleifend purus dictum sit amet. Etiam sollicitudin quis nunc id tempor. Aenean nunc mauris, varius ut turpis tempus, pretium egestas diam. In nunc quam, laoreet ut ex in, egestas finibus enim. Pellentesque accumsan vehicula semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque dolor tortor, fermentum et sollicitudin in, pharetra eget odio. Aenean eget erat ante. Proin libero erat, tincidunt non posuere non, facilisis non enim. Praesent a dignissim ex. Phasellus viverra nec velit at tincidunt. Pellentesque lorem lectus, molestie vitae turpis a, dignissim aliquam dolor. Suspendisse consectetur, sapien non feugiat semper, ipsum lacus consectetur ligula, id laoreet ligula velit a lorem. Maecenas ac ante urna. Phasellus vitae mi nec tortor luctus viverra sed sit amet arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla vehicula arcu, vitae eleifend purus dictum sit amet. Etiam sollicitudin quis nunc id tempor. Aenean nunc mauris, varius ut turpis tempus, pretium egestas diam. In nunc quam, laoreet ut ex in, egestas finibus enim. Pellentesque accumsan vehicula semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque dolor tortor, fermentum et sollicitudin in, pharetra eget odio. Aenean eget erat ante. Proin libero erat, tincidunt non posuere non, facilisis non enim. Praesent a dignissim ex. Phasellus viverra nec velit at tincidunt. Pellentesque lorem lectus, molestie vitae turpis a, dignissim aliquam dolor. Suspendisse consectetur, sapien non feugiat semper, ipsum lacus consectetur ligula, id laoreet ligula velit a lorem. MadfsgsdgsdfgsdfgsdgsdfgPellentesque dolor tortor, fermentum et sollicitudin in, pharetra eget odio. Aenean eget erat ante. Proin libero erat, tincidunt non posuere non, facilisis non enim. Praesent a dignissim ex. Phasellus viverra nec velit at tincidunt. Pellentesque lorem lectus, molestie vitae turpis a, dignissim aliquam dolor. Suspendisse consectetur, sapien non feugiat semper, ipsum lacus consectetur ligula, id laoreet ligula velit a lorem. Madfsgsdgsdfgsdfgsdgsdfg 
 
</p> 
 
</body> 
 
</html>

+0

はい、ブートストラップグリッドシステムを使用しています –

関連する問題