Question

我有以下HTML：

<div class="Section__item">
                <div class="Section__item__title">Title</div>
                <div>
                  <img
                    class="Section__item__image"
                    width="120px"
                    src="/static/images/test.jpeg"
                  >
                  <i class="Section__item__icon icon-right-nav-workflow"/>
                </div>
                <div class="Section__item__text">This is a descritption</div>
              </div>

这是我使用scss的样式：

.Section {
 &__item{
      border: #EEF3F7 solid 1px;
      padding: 10px;
      height: 150px;
      margin-bottom: 15px;
      box-shadow: 3px 3px #EEF3F7;
      &:hover {
        background-color: #E3F4FE;
        cursor: pointer;
      }
      &__title {
        text-align: left;
        color: black;
        font-size: 16px;
        font-weight: 900;
      }
      &__image {
        padding-top: 5px;
        float: left;
      }
      &__icon {
        float: right;
        font-size: 40px;
      }
      &__text {
        float: left;
      }
     }
}

结果如下：

我需要得到的是以下内容：

我需要将文本放置在图像下方，并且在右侧看到“红色”线的地方，如果文本较大，请自动换行。

此外，如果您看到正确的图标必须与图片完全位于同一顶层。

有任何线索吗？

Answer 1

有很多方法可以做到这一点（flexbox，网格，表格，绝对定位）。以前的做法是一个明确的解决办法，但实际上您应该完全避免浮动。到目前为止，最简单的解决方案是删除所有浮点数。制作保存图像的div和图标position:relative；并将图标设置为position:absolute; top:0; right:0;。

.Section__item {
  border: #EEF3F7 solid 1px;
  padding: 10px;
  min-height: 150px; /* changed to min-height so that it expands if there's loads of text */
  margin-bottom: 15px;
  box-shadow: 3px 3px #EEF3F7;
  width:400px;
}

.Section__item:hover {
  background-color: #E3F4FE;
  cursor: pointer;
}

.Section__item__title {
  color: black;
  font-size: 16px;
  font-weight: 900;
}

.Section__item__imagewrap {
  position: relative;
}

.Section__item__image {
  margin-top: 5px;
}

.Section__item__icon {
  font-size: 40px;
  line-height: 40px;
  position: absolute;
  top: 0;
  right: 0;
}

.Section__item__text {}

<div class="Section__item">
  <div class="Section__item__title">Title</div>
  <div class="Section__item__imagewrap">
    <img class="Section__item__image" width="120px" src="https://placeimg.com/320/240/any">
    <i class="Section__item__icon icon-right-nav-workflow">i</i>
  </div>
  <div class="Section__item__text">This is a description. If the text is long it will wrap and the section__item's height will increase to fit the content.</div>
</div>

Answer 2

嗯...不使用float？或者更确切地说，仅在您想打破常规流程的一件事上使用浮动，即图标。

PS：//OR let diff = currentState-previousState for (var i = 0; i < diff; i++) { this.renderStuff() //run my function here }不是自动关闭标签，因此即使浏览器可能会忽略您的错误，编写<i>也不正确。另外，在图像上放置<i />似乎不正确，我在此代码中切换到了页边空白。

padding

.Section__item {
  display: inline-block; /* so it doesn't take full width of the snippet */
  border: #EEF3F7 solid 1px;
  padding: 10px;
  height: 150px;
  margin-bottom: 15px;
  box-shadow: 3px 3px #EEF3F7;
}
.Section__item:hover {
  background-color: #E3F4FE;
  cursor: pointer;
}
.Section__item__title {
  text-align: left;
  color: black;
  font-size: 16px;
  font-weight: 900;
}
.Section__item__image {
  margin-top: 5px;
  vertical-align: top;
}
.Section__item__icon {
  font-size: 40px;
  float: right;
}

DIV内部的定位元素

2 个答案: