BinaryDevelop
  1. ホーム
  2. ハイパーリンク

[解決済み] CSSで要素を水平方向にまっすぐではなく、垂直方向に下に表示する。

2022-03-14 22:58:54

質問

私はdivの中にラップされている要素を持っています。その要素はdivの中で水平方向に表示されます。 問題は、その要素を垂直方向に表示する方法がわからないことです。 私はいくつかの研究を行い、1つの解決策は、vertical-alignを使用することでしたが、それは動作しないようです。

私が達成しようとしていることの例はここにあります。

http://s9.postimg.org/6i34jzazz/save.jpg

私のCSS 

  .container {height:500px; width: 700px; background-color:#00B358}

私のHTML 

  <html>
  <head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/navigation.css">
  </head>

  <div class="container ">
  <img border="0" src="download.jpg" alt="Pulpit rock" width="304" height="228">
  <img border="0" src="1.jpg" alt="Pulpit rock" width="304" height="228">
  <img border="0" src="2.jpg" alt="Pulpit rock" width="304" height="228">
  </div>

解決方法は？

マークアップを再編成しない限り、あなたがやろうとしていることを実現できるとは思えません。おそらく、div を列のコンテナに配置する必要があるでしょう（少なくとも、フレックスボックスが広く使用されるまでは！）。

簡単な例です。

HTMLです。 

<div class="container">
    <div class="col-1">
        <img border="0" src="download.jpg" alt="Pulpit rock">
        <img border="0" src="1.jpg" alt="Pulpit rock">
    </div>
    <div class="col-2">
        <img border="0" src="1.jpg" alt="Pulpit rock">
    </div>
</div>

CSSです。 

img {
    display: block;
}

.container > div {
    float: left;
}

説明する。

要素がインラインの場合、改行が必要になるまで隣り合って表示されるのが自然な流れです。要素がブロックレベルである場合は、常に前の要素の下に表示されます。もう一つの選択肢は、要素をフロートさせることですが、これもスペースがあれば前の要素の横に表示され、下に表示されることはありません。

そのため、縦に並べたい要素をグループ化し、その横に次のグループを浮かせるようにマークアップを調整する必要があるのです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します