Question

我有一个关于在位置相对div内浮动2个div的问题。它们应向左浮动，但不起作用。我通过在开发人员工具中重写CSS来尝试了几次。我希望有一个人可以帮助我。我使用谷歌公司的MDL（Material Design Lite）响应框架。结果应如截图所示。在此先感谢您的帮助。

Final result

＆＃13;

#define _CRT_SECURE_NO_WARNINGS
#include <stdio.h>
#include <stdlib.h>



typedef struct node{
    int number;
    struct node *nextPtr;
} node;


node* insert(node* head, int num) {
    node *temp, *prev, *next;
    temp = (node*)malloc(sizeof(node));
    temp->number = num;
    temp->nextPtr = NULL;
    if (!head){
        head = temp;
    }
    else{
        prev = NULL;
        next = head;
        while (next && next->number % 2 == 0){
            prev = next;
            next = next->nextPtr;
        }
        if (!next){
            prev->nextPtr = temp;
        }
        else{
            if (prev) {
                temp->nextPtr = prev->nextPtr;
                prev->nextPtr = temp;
            }
            else {
                temp->nextPtr = head;
                head = temp;
            }
        }

        return head;
    }
}

void free_list(node *head) {
    node *prev = head;
    node *cur = head;
    while (cur) {
        prev = cur;
        cur = prev->nextPtr;
        free(prev);
    }
}

int main(){

    node *head, *p;
    head = NULL;

    head = insert(head, 3);
    head = insert(head, 1);
    head = insert(head, 4);
    head = insert(head, 6);
    head = insert(head, 7);
    head = insert(head, 8);

    p = head;
    while (p) {
        printf("%d ", p->number);
        p = p->nextPtr;
    }
    free_list(head);
    return 0;
}

＆＃13;

.card-wasserlabor {
  min-height: 0;
  width: 100%;
  min-height: 110px;
  height: auto;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);

  h4 {
    font-size: $card-title;
    color: $dark-text;
    margin-left: 12px;
    margin-top: 3px;
  }

  .img {
    background: $grey;
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 117px;

    img {
      height: 100%;
      position: absolute;
      width: 100%;
    }

    .circle-check {
      background: rgba($black, 0.4);
      height: 56px;
      width: 56px;
      border-radius: 100%;
      position: absolute;
      left: calc(50% - 30px);
      top: calc(50% - 25px);

      &:hover {
        background: rgba($red, 1);
      }
    }

＆＃13;

Answer 1

我无法真正运行你的代码，有太多的缺失变量可以解决这个问题。所以我重新编写了代码。我希望这可以提供帮助。你只需要管理你的宽度并浮动所有东西：

看看这个jsFiddle。

编辑：首先，jsFiddle链接不正确。如果代码完全与其他内容相关，请重新点击此链接。

编辑2 ：修复了代码中的填充错误。并取代了jsfiddle链接。

html：

<div class="header-area">
  <div style="padding: 20px; ">
    Yellow header
  </div>
</div>

<div class="container">
  <div class="element" style="background-color: green; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      This is the description
    </div>
  </div>
  <div class="element" style="background-color: red; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      This is the description
    </div>
  </div>
  <div class="element" style="background-color: orange; ">
    <img src="http://placehold.it/150x150" alt="">
    <div class="description">
      <div class="text">
        This is the description
      </div>
    </div>
  </div>
</div>

css：

.header-area{
  background-color: yellow; 
  height: 100px; 
  width: 100%; 
}
.container{
  height: 100%; 
  width: 100%; 
  float: left; 
  background-color: lightblue;  
}
.element{
  float: left; 
  width: 50%; 
  height: 150px; 

}
img{
  float: left; 
}
.description{
  text-align: center; 
}
.text{
  padding-top: 50px; 
}

Answer 2

我已对您的代码进行了一些修改，希望它可以帮助您完全实现目标：

要将文本放在img上，您需要相对定位其父级，并将文本置于绝对位置。然后你可以将它移到img上。
为了轻松地将img与其他元素对齐，我认为包装这些元素并为它们提供内联块显示非常有用。然后你可以在你想要的位置调整它们。

＆＃13;

.card-wasserlabor {
  min-height: 0;
  width: 100%;
  min-height: 110px;
  height: auto;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.015),0 3px 1px -2px rgba(0,0,0,.15),0 1px 5px 0 rgba(0,0,0,.015);
  }

  h4 {
    font-size: $card-title;
    color: $dark-text;
  }

  .img {
    background: $grey;
    display: inline-block;
    height: 100%;
    position: relative;
    width: 117px;
    }

    .circle-check {
      position: absolute;
      top: 0;
      left: 0;
      background: rgba($black, 0.4);
      height: 56px;
      width: 56px;
      border-radius: 100%;
      position: absolute;
      left: calc(50% - 30px);
      top: calc(50% - 25px);

      &:hover {
        background: rgba($red, 1);
      }
      }

.info-wrapper{
  display: inline-block;
  vertical-align: top;
}

＆＃13;

<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
            <div class="mdl-card card-wasserlabor">
              <div class="img">
                  <img src="http://sweetclipart.com/multisite/sweetclipart/files/ff0000%20Color%20Square%20RGB%20Red.png" alt="sera" width="100px">
                  <div class="circle-check">
                    <i class="material-icons">check</i>
                  </div>
              </div>
              <div class="info-wrapper">
                <div class="text">
                  <h4>Mittelamerika</h4>
                </div>
                <div class="info">
                  <div class="mdl-button mdl-js-button mdl-button--icon">
                    <i class="material-icons">info</i>
                  </div>
                </div>
              </div>
            </div>
          </div>

＆＃13;

在位置相对div内浮动2个div

2 个答案: