Question

我希望我的内嵌图像放在容器中（白色背景）。我的HTML是：

<div class="row">
            <div class="col-md-12">
                <div class="award-select">
                    <div class="image-group">
                        <img class="myimg" alt="Bootstrap Image Preview" src="images/wosmmop.png" />
                        <figcaption>Date</figcaption>
                    </div>
                    <div class="image-group">
                        <img class="myimg" alt="Bootstrap Image Preview" src="images/wosmmop.png" />
                        <figcaption>Date</figcaption>
                    </div>
                </div>
            </div>
        </div> <!-- /row -->

我的css是：

.award-select{
    max-width: 100%;
    padding-left: 10px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);

  }

当我添加：

.image-group {
    width: 130px;
    height: auto;
    float: left
  }

为了让我的图像内联，我松开了白色背景。

Answer 1

问题是＆＃34; .image-group＆＃34; div设置为float，浮动div不占任何维度。所以你的选择＆＃39; .award-select＆＃39; div是0px乘0px。

解决方案1： 您只需将height: 100%;添加到＆＃39; .award-select＆＃39;格。

＆＃13;

.award-select {
  max-width: 100%;
  padding-left: 10px;
  background-color: red;
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  height: 100%;
}

.image-group {
  width: 130px;
  height: auto;
  float: left
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">
  <div class="col-md-12">
    <div class="award-select">
      <div class="image-group">
        <img class="myimg" alt="Bootstrap Image Preview" src="images/wosmmop.png" />
        <figcaption>Date</figcaption>
      </div>
      <div class="image-group">
        <img class="myimg" alt="Bootstrap Image Preview" src="images/wosmmop.png" />
        <figcaption>Date</figcaption>
      </div>
    </div>
  </div>
</div>
<!-- /row -->

＆＃13;

解决方案2 ：由于您使用的是Bootstrap，因此这里有一个帮助类.clearfix，您可以添加到＆＃39; .award-select＆＃39; div让你的代码工作。

Answer 2

将浮动或高度添加到奖励选择班级。

.award-select{float:left}
.award-select{height:200px;}

你的背景一直在关闭，因为奖励选择课上没有浮动，但是你的另一个课程中有一个你需要漂浮两个。添加高度也可以解决问题。

Answer 3

使用此代码，添加class =＆＃34; clearfix＆＃34;清除浮动问题

<div class="award-select">
                    <div class="image-group">
                        <img class="myimg" alt="Bootstrap Image Preview" src="images/wosmmop.png" />
                        <figcaption>Date</figcaption>
                    </div>
                    <div class="image-group">
                        <img class="myimg" alt="Bootstrap Image Preview" src="images/wosmmop.png" />
                        <figcaption>Date</figcaption>
                    </div>
                    <div class="clearfix"></div>
                </div>

Answer 4

我调整了你的CSS。

以下是代码（在底部运行代码段）：

＆＃13;

.award-select
{
  position:relative;
  float:left;
  max-width: 100%;
  padding-left: 10px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
   border-radius: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
  
.image-group
{
  position:relative;
  float:left;
  width: 130px;
  height: auto;
  background:transparent;
}

＆＃13;

<div class="row">
    <div class="col-md-12">
        <div class="award-select">
            <div class="image-group">
                <img class="myimg" alt="Bootstrap Img" src="images/wosmmop.png" />
                <figcaption>Date</figcaption>
            </div>
            <div class="image-group">
                <img class="myimg" alt="Bootstrap Img" src="images/wosmmop.png" />
                <figcaption>Date</figcaption>
            </div>
        </div>
    </div>
</div> <!-- /row -->

＆＃13;

html和CSS - 容器中的内嵌图像（白色背景）

4 个答案: