时间戳

首页 > 解决方案 > div 和 image 向左浮动

html - div 和 image 向左浮动

问题描述

我尝试用图像旁边的“testtext”浮动 div，但它不起作用。

我想我犯了一个简单的错误，但我找不到原因:-)

<div class="module-boxs">
  <div style="display:inline-flex;"">
     <img class="float-left" src="logo.jpg">
  </div>
  <div style="display:inline-flex;">
	 <h4>Modulename</h4>
     <h5>Web Dewloper</h5>
  </div>
</div>

标签： htmlcss

解决方案

您可以使用display: flex但flex 在 IE10 等较旧的浏览器中不受支持。您必须编辑您的 HTML 结构，这样会更容易。这里有一个例子：

.module-name {
  margin-bottom: 15px;
  padding-top: 15px;
}

.module-name:after {
  content: '';
  display: table;
  clear: both;
}

.module-name img.logo {
  width: 25%;
  float: left;
}

.module-name .text{
  width: 75%;
  float: left;
  padding-left: 10px;
}

.module-name .text h4 {
  display: block;
  vertical-align: top;
  margin: 0;
  font-size: 20px;
}

.module-name .text h5 {
  display: block;
  vertical-align: top;
  margin: 0;
  font-size: 16px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="col-md-4 col-sm-4 col-xs-12 module-box">
  <div class="module-boxs">
    <div class="module-name">
      <img class="logo" src="https://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg">
      <div class="text">
        <h4>Modulename</h4>
        <h5>Web Dewloper</h5>
      </div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur sed do eiusmod tempor incididunt.</p>
    <button class="btn">text</button>
  </div>
</div>

推荐阅读