2

我对如何使用 CSS 在容器中定位两个元素（实现彩色框的两个 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>

如您所见，有一个#container包含#header2div 的外部，在这个 div 下有两个由 div 创建的first列second。

我希望该first列位于#containerdiv 的左侧，而该second列位于 div 的右侧#container。

为此，我将float: left属性设置为#first列，将float: right属性设置为#second列。

这是一个好的解决方案还是会产生某种问题？

肿瘤坏死因子

安德烈亚

4

2 回答 2

1

我认为不会有任何问题..这也可以通过其他方式实现

  • 您也可以使用div.wrapto wrap#first & #second然后您可以display:inline-block;在#first & #secondwhile display:inline;in 中使用div.wrap，还可以查看是否应该使用 inline-block 代替 float以及float vs inline-block
  • 你float:left;只能在#firstthen中使用它#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 回答