Question

这些是我的html和css文件，当我在css开头重新设置边距和填充后，我面临css无法正常工作的问题，因此我应该将浏览器页面分为两个部分，分别为30％红色和70％％白色，但由于某种原因似乎不起作用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fashion</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="hero">
      <div class="left-col"></div>
      <div class="right-col"></div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

.hero {
  height: 100%;
  width: 100%;
  display: flex;
}

.left-col {
  flex-basis: 30%;
  height: 100%;
  background: #e80707;
}

.right-col {
  flex-basis: 70%;
  height: 100%;
}

Answer 1

它工作正常，您不能仅因为左和右col中没有任何内容而看到输出，因此，height为0，请尝试添加一些内容或为左右col提供高度。 / p>

*{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

.hero  {
    height: 100%;
    width: 100%;
    display: flex;
}

.left-col{
    flex-basis: 30%;
    height: 100%;
    background: #e80707;
}

.right-col{
    flex-basis: 70%;
    height: 100%;
    background: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fashion</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
    <div class="hero">
        <div class="left-col">Left Col</div>
        <div class="right-col">Right Col</div>
    </div>
</body>
</html>

重置边距和填充后CSS无法正常工作

1 个答案: