Question

我尝试在div的图片旁边加上“ testtext”，但这是行不通的。

我认为我犯了一个简单的错误，但我找不到原因：-）

<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>

Answer 1

只需将所有内容放入div并使用display：inline-flex即可彼此内联显示内容

<div>
  <div style="display:inline-flex;">1</div>
  <div style="display:inline-flex;">2</div>
  <div style="display:inline-flex;">3</div>
</div>

Answer 2

您可以使用display: flex，但是在诸如IE10之类的旧版浏览器中不支持flex。您必须编辑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>

div和图片的左浮动

2 个答案: