如何连续彼此相邻获得2个不同的宽度div

我需要有一个带有标头的电子邮件布局，在身体中，将是两个divs，其中一个是主要容器div的宽度的2/3，而另一个则是权利旁边是总宽度的1/3。

我也想知道是否有制定垂直规则的技巧，类似于我们经典看到的水平规则。

这是我被告知要尝试的代码，但是我在主容器div中没有得到两个div：

<html>
<head>
<meta charset="UTF-8">
<title>AUSA email</title>
</head>
<body style="font-family:sans-serif;"
      #wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 400px;
    border: 1px solid red;
}
#second {
    width: 200px;
    border: 1px solid green;
}></style>
    <div id="wrapper">
    <div id="first">Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</div>
    <div id="second">Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.</div>
</div>
</body>
</html>

我认为您是指将显示设置为inline-block？

#wrapper {
  width: 500px;
  border: 1px solid black;
}
#first {
  width: 300px;
  border: 1px solid red;
  display: inline-block;
}
#second {
  width: 200px;
  border: 1px solid green;
  display: inline-block;
}

使用 flexbox

这是您应该阅读的指南。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS

#wrapper {
width: 500px;
border: 1px solid black;
display: flex;
justify-content: center;
}
#first {
width: 300px;
border: 1px solid red;
}
#second {
width: 200px;
border: 1px solid green;
}

html

<html>
<head>
<meta charset="UTF-8">
<title>AUSA email</title>
</head>
<body>
<div id="wrapper">
<div id="first">Sample text.</div>
<div id="second">Sample text.</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：