【问题标题】:Floating image between 2 columns2列之间的浮动图像
【发布时间】:2017-10-21 02:24:21
【问题描述】:

我有一个问题。是否存在类似于“浮动:中心”的东西? 我正在尝试制作 2 列文本,并且我想在底部有一个图像......但不像我的例子。我想让它浮起来。

感谢您的回答。

.column{
  display:inline-block;
  width: 150px;
  margin-right: 10px;
}
.photo{
  width: 150px;
}
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>
<img src="http://www.matmasar.wz.cz/foto.jpg" class="photo">
<p class="column">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
</p>

【问题讨论】:

  • 您能解释一下为什么需要浮动图像吗?为什么您当前的代码不足?如果您也浮动列,您可以浮动图像并将其保持在中间。但是,您可能已经注意到,这会使图像移动到父容器的顶部。

标签: html css css-float centering


【解决方案1】:

在回答你的问题时,没有float:center;这样的东西

就你的例子而言,我认为这就是你想要做的:

.column{
  float:left;
  width: 150px;
  margin-right: 10px;
}
.photo{
  width: 150px;
}
<div class="column">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam</p>
</div>
<div class="column">
  <img src="http://www.matmasar.wz.cz/foto.jpg" class="photo">
</div>
<div class="column">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam</p>
</div>

在 sn-p 中,我从您的 &lt;p&gt; 标记中删除了 column 类,而是将每一列放在它自己的 &lt;div&gt; 中。这会使图像充当它自己的列。

我还删除了display:inline-block 并将float:left 添加到列类中,以确保列彼此并排显示。

【讨论】:

    【解决方案2】:

    将你的图片放在一个列中,并通过设置父级将其放置在底部:

    position: relative;
    

    和孩子

    position: absolute;
    bottom: 0;
    

    结果见下面的sn-p:

    .column{
      display:inline-block;
      position: relative;
      width: 150px;
      margin-right: 10px;
    }
    .column img {
      position: absolute;
      bottom: 0;
      width: 150px;
    }
    <p class="column">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
    </p>
    <p class="column">
    <img src="http://www.matmasar.wz.cz/foto.jpg">
    </p>
    <p class="column">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Etiam commodo dui eget wisi. Donec vitae arcu. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam
    </p>

    【讨论】:

    • 我认为我在描述我的问题时做得很糟糕。我将它上传到我的测试site...文本没有浮动图像...它停留在列中...当文本到达图像区域时它不会“移动”。如果你明白我的意思。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-19
    • 1970-01-01
    • 1970-01-01
    • 2014-10-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多