2

CSS を使用してコンテナに 2 つの要素 (色付きのボックスを実装する 2 つの div) を配置する方法について、愚かな CSS の疑問があります。

私が作成したこのテストページを見てください: http://onofri.org/example/Typo3Test/mycontent/

このウェブサイトの中央エリアにいくつかのコンテンツ (いくつかの色付きのボックス) を配置しました。そのコードは次のとおりです。

HTML/CSS コード:

#header2 {
  background-color: #DEB887;
}
#container {
  /* consente di posizionare un elemento al centro del suo contenitore */
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
  /* Imposto la larghezza */
}
#first {
  /*background-color: #8FBC8F;*/
  /* SFUMATURA BACKGROUND: */
  background-image: -ms-linear-gradient(top, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  background-image: -moz-linear-gradient(top, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  background-image: -o-linear-gradient(top, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35F2EC), color-stop(0.5, #16B7D6), color-stop(1, #016D94));
  background-image: -webkit-linear-gradient(top, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  background-image: linear-gradient(to bottom, #35F2EC 0%, #16B7D6 50%, #016D94 100%);
  width: 200px;
  min-height: 300px;
  border-radius: 10px;
  float: left;
  /*margin-right: 15px;*/
  margin-bottom: 20px;
  box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
  -moz-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
  -webkit-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
}
#second {
  background-color: #8FBC8F;
  width: 200px;
  min-height: 300px;
  border-radius: 10px;
  float: right;
  /*margin-left: 15px;*/
  margin-bottom: 20px;
  box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
  -moz-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
  -webkit-box-shadow: 6px 7px 15px rgba(0, 0, 0, 0.37);
}
<div id="container">
  <div id="header2">
    <p>TITLE</p>
  </div>

  <div id="first">
    <p>BLA BLA BLA</p>
    <p>BLA BLA BLA</p>
    <p>BLA BLA BLA</p>
  </div>

  <div id="second">
    <p>BLA BLA BLA</p>
    <p>BLA BLA BLA</p>
    <p>BLA BLA BLA</p>
  </div>

</div>

ご覧のとおり、#containerand div を含む外部が#header2あり、この div の下にfirstand seconddiv によって作成された 2 つの列があります。

列をdivfirstの左側に配置し、その列を div の右側に配置したいと考えています。#containersecond#container

このことを行うために、プロパティを列に設定し、プロパティfloat: leftを#first列に設定しました。float: right#second

それは良い解決策ですか、それとも何らかの問題を引き起こす可能性がありますか?

TNX

アンドレア

4

2 に答える 2

1

問題はないと思います..これは他の方法でも達成できます

  • div.wrapラップするために使用することも#first & #secondできますdisplay:inline-block;し、in #first & #secondwhile display:inline;inを使用することもできます。また、float の代わりに inline-block を使用し、float vs inline-blockdiv.wrapを使用する必要があるかどうかも確認できます。
  • float:left;でのみ使用でき、#firstそれ#secondを継承します。コンテンツを並べて表示します
  • display:table-row;fordiv.wrapとdisplay:table-cell;for を使用することもできますが#first & #second、避ける方がよいでしょう
于 2013-09-03T10:38:07.650 に答える
1

私のお気に入りは、次の例のように flex を使用することです。

#container {
  display: flex;
  width: 500px;
  flex-direction: row;
  justify-content: space-between;
  background-color: #DDDDAA;
}

#col1, #col2 {
  width: 35%;
  text-align: justify;
  padding: 10px;
  background-color: #DDDDFF;
}
<div id="container">
  <div id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div id="col2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

于 2016-08-10T07:36:14.900 に答える