Question

我正在处理我的化学应用程序，我正在努力展示我想象它可以工作的div元素。

我的目标是将div悬浮在图像上：所以当隐藏红色/绿色div时，一切都保持有序。

enter image description here 是否可以不使用绝对/固定定位？我真的需要那些div向左浮动并相互了解所以我无法通过绝对位置来解决它。我尝试过添加保证金，但是其他div不能适合其他元素保证金。感谢您花时间阅读这篇文章！

已添加代码：

<div class='container'>
<div class='base-cell'>S</div>
<div class='base-cell'>O</div>
<div class='index-cell'>3</div>
<div class='charge-cell'>2-</div>
</div>


.container{
border: 1px solid red;
height: 1.5em;
text-align: center;
position: relative;
}

.base-cell{
position: relative;
background: red;    
height: 1em;
float: left;
margin-top: 0.2em;
font-size: 1em;
border: 1px solid orange;
display: inline-block;
}

.index-cell{
position:relative;
height:0.7em;
margin-top:1.5em;
font-size:0.7em;
display:table;
background: blue;
float:left;
}

.ion-index-cell{
position: relative;
height: 1em;
font-size: 0.7em;
border: 1px solid cyan;
display: table;
background: green;
}

.charge-cell{
height: 1em;
font-size: 0.7em;
border: 1px solid blue;
display: inline-block;
float:left;
}

编辑：感谢您的回复，我真的不想使用中间列解决方案，因为另一个要求：抱歉之前没有显示完整的上下文。正如您在图片中看到的那样，所有元素都向左流动，我可能需要使用display：none隐藏一些元素。这就是我寻找无父解决方案的原因： enter image description here

Answer 1

如果你翻转图表，那么使用浮动更容易构建。您可以使用变换以正确的方式将其翻转。

＆＃13;

.wrap {
  max-width: 100px;  
  -webkit-transform: rotate(90deg) translate(-170px, -10px);
  -moz-transform: rotate(90deg) translate(-170px, -10px);
  -ms-transform: rotate(90deg) translate(-170px, -10px);
  transform: rotate(90deg) translate(-170px, -10px);
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  overflow: hidden;
}
.block {
  height: 40px;
  width: 100%;
  float: left;
  border: 1px solid #000;
  box-sizing: border-box;
  margin: 10px 0;
  
}
.block-left {
  max-width: 40%;  
  border-color: #f00;
}
.block-right {
  max-width: 40%;
  float: right;
  border-color: #0f0;
}

＆＃13;

<div class="wrap">
  <div class="block block-top"></div>
  <div class="block block-left"></div>
  <div class="block block-right"></div>
  <div class="block block-bottom"></div>
</div>

<div class="wrap">
  <div class="block block-top"></div>
  <div class="block block-right"></div>
  <div class="block block-bottom"></div>
</div>

<div class="wrap">
  <div class="block block-top"></div>
  <div class="block block-left"></div>
  <div class="block block-bottom"></div>
</div>

＆＃13;

Answer 2

这可能对你有所帮助。它非常粗糙的HTML，但我相信你正在寻找。它应该至少帮助你朝着你想要的方向前进。

<div style="height:100%;">
    <div style="float:left; width: 33%;">
        Content 1
    </div>
    <div style="float:left; width: 33%;">
        <div style="height:50%">
            <div>Content 2</div>
        </div>
        <div style="height:50%;">
            <div>Content 3</div>
        </div>
    </div>
    <div style="float:left; width: 33%;">
        Content 4
    </div>
</div>

Answer 3

从您的问题来看，您似乎只想使用当前正在使用的float:left而不是position:absolute，并且仍然希望隐藏绿色和红色框，同时保持所有其他框完好无损。

这可以通过在框上使用float:left;同时在红色和绿色框上设置opacity:0;（同时visibility:hidden工作）来实现。

Answer 4

所以我不确定你是如何处理标记的，但希望你这样做正确的方式。看起来你有一个网格格式，但你没有在中间列上应用它。

您应该做的是创建三列，然后在必要时，您可以隐藏中间列。红色和绿色框可以存在于中间列中。这样，如果您曾说过要在左侧或右侧列中添加红色/绿色部分，您可以轻松地执行此操作。

我在下面创建了一个示例。我还添加了一个名为hide的类，它可以应用于不同的列和/或inner框。就像我上面提到的那样，如果你想要隐藏中间列中的所有内容，你应该将hide添加到middle col。如果您要隐藏其中一个元素，请将hide应用于inner元素。

我在中间列中进行了一些absolute定位，但您实际上并不需要这样做 - 您可以将其更改为float: left，只需为margin-top设置bottom {1}}框。

.col {
    float: left;
    width: 100px;
    height: 200px;
    border: 1px solid black;
    margin-left: 10px;
    position: relative;
}

.inner {
   width: 100px;
   height: 75px;
   margin-left: auto;
   margin-right: auto;
   position: absolute;
}

.top {
  top: 0;
  border: 1px solid red;
}

.bottom {
  bottom: 0;
  border: 1px solid green;   
}

.hide {
    display: none;

<div class="col left"></div>
<div class="col middle">
    <div class="top inner"></div>
    <div class="bottom inner"></div>
</div>
<div class="col right"></div>

编辑：我发现您发布了CSS并且您正在使用display: table。为此，我想请你参考这个链接。

shouldiusetablesforlayout.com

EDIT2 ：我看到您更新了您的问题，但总体概念适用。你还在处理列，但我想你现在的情况是，你希望那些列在容器中。

.col-container {
  float: left;
  margin-bottom: 10px;
}
.col {
  float: left;
  width: 100px;
  height: 200px;
  border: 1px solid black;
  margin-left: 10px;
  position: relative;
}
.inner {
  width: 100px;
  height: 75px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}
.top {
  top: 0;
  border: 1px solid red;
}
.bottom {
  bottom: 0;
  border: 1px solid green;
}
.hide {
  display: none;
}

<div class="col-container">
  <div class="col left"></div>
  <div class="col middle">
    <div class="top inner"></div>
    <div class="bottom inner hide"></div>
  </div>
  <div class="col right"></div>
</div>
<div class="col-container">
  <div class="col left"></div>
  <div class="col middle">
    <div class="top inner hide"></div>
    <div class="bottom inner"></div>
  </div>
  <div class="col right"></div>
</div>
<div class="col-container">
  <div class="col left"></div>
  <div class="col middle">
    <div class="top inner"></div>
    <div class="bottom inner"></div>
  </div>
  <div class="col right"></div>
</div>

如果您在整页中查看并缩小窗口大小，您会看到第二行显示第3个col-container。如果你想确保它只有两列或某些东西在某些点上断，你可以通过向某些元素添加clear，区分row类等来调整它。

Answer 5

我会使用flexbox而justify-content: space-between;应该是你要求的东西。

<article>
  <div>left</div>
  <div class="content">
    <p>top</p>
    <p>bottom</p>
  </div>
  <div>right</div>
</article>

article {
  display: flex;
  min-height: 10em;
}
article > div {
  flex: 1 1 calc(33.3333% - 1em);
  margin: 0.5em;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Codepen sample（w / -prefix-free，样式和SCSS）

简单;）

HTML / CSS Float Left和Top / Bottom没有位置绝对/固定

5 个答案: