Question

div元素是block元素，默认显示属性是block，要在line中显示它，可以使用inline-block属性。

<!DOCTYPE html>
<html>

<head>
  <title>Pictures</title>
  <style type="text/css">
  .row {
      height: 50px;
      width: 50px;
    }
    
    .row1 {
      padding-bottom: 12px;
      display: inline-block;
      float: left;
      padding-right: 14px;
    }
    
    .row2 {
      display: inline-block;
    }
  }
  #img1 {
    max-width: 50%;
    max-height: 20%;
  }
  </style>
  <script type="text/javascript">
  </script>
</head>

<body>
  <div class="content">
    <div class="row">
      <div class="row1">
        <!--img height="50px" width="50px" src="images/image1.jpg"-->
        hello
      </div>
      <div class="row2">
        Beutiful picture clicked by photographer
      </div>
    </div>
  </div>
</body>

</html>

我不明白为什么这2个div无法并排显示，我使用的是内联块，但仍然没有帮助。

Answer 1

这是因为.row的宽度是如此之小，以致于无法同时容纳两个div。尝试此操作将使两者并行。

.row {
  height: 50px;
  width: 1000px;
}

如何并排显示div元素

1 个答案: