时间戳

首页 > 解决方案 > Div 不正确

html - Div 不正确

问题描述

我希望第二个和第三个 div 的文本在右侧。我通过使用margin-left: auto并将所有 div 设置为display: inline-block. 它也不起作用float: left。我做错了什么？

它应该看起来像这样

在此处输入图像描述

.header > div {
  display: inline-block;
}

.right-justified{
  margin-left: auto;
  width: auto;
}
<section class="header">
      <div>
        <div>Left</div>
        <div>Left</div>
      </div>
        <div class="right-justified">
          <div>Right</div>
          <div>Right</div>
        </div>
        <div>
          <div>Right</div>
        </div>
    </section>

标签： htmlcss

解决方案

您应该使用 flexbox 或网格来获得更好的布局设计，从而成为一名出色的开发人员，而不是使用这种愚蠢的技术。

试试下面的代码——

.header{
    display: flex;
    justify-content: space-between;
  }
  
.right-justified{
    display: flex;

}
.mid{
    align-self: center;
    margin:0 1rem;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>template</title>
  </head>

  <body>
    <section class="header">
      <div>
        <div>Left</div>
        <div>Left</div>
      </div>
      <div  class="right-justified">
        <div>
          <div>Right</div>
          <div>Right</div>
        </div>
        <div class="mid">
          <div>Right</div>
        </div>
      </div>
    </section>
  </body>
</html>

推荐阅读