Question

所以我被建议不要在我的布局中使用表格而且我试过了，这给了我这个烦人的问题，就是我没有按照我想要的方式工作。

这是我目前的最终结果：

但是，我想将右下方框中的问题移动到与其正上方的文本相同的左边距/填充。

这是我的代码。

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
#Cogna {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 60px;
  font-weight: bold;
  border: 2px solid black;
  padding: 40px 20px 10px 20px;
  margin-right: 0.5em;
  width: 20%;
  height: 20%;
}

h1 {
  font-family: 'Lobster Two';
  vertical-align: text-bottom;
  font-size: 20px;
  border: 2px solid black;
  height: 20%;
  padding: 4em 1em 1em 1em;
}

.maintext {
  padding: 1.58em;
  height: 46em;
  display: block;
  border: 2px solid black;
  min-width: 80%;
}

nav {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 1em;
  padding: 40px 20px 10px 20px;
  overflow-y: scroll;
  width: 20%;
  height: 46em;
  border: 2px solid black;
}

nav ul {
  list-style: none;
}

<div>
  <div id="Cogna">Cogna</div>
  <h1>Home</h1>
</div>

<div>
  <nav>
    <ul>Home</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <ul>a</ul>
    <span style="display: block; height: 100%;"></span>
  </nav>
  <div class="maintext">
    <p style="margin-left: 16pt;">
      Hello.
    </p>
  </div>
</div>

但是，我似乎无法正确完成这项任务。我已经改变了我的CSS中导航和maintext id的边距和填充，但它似乎仍然没有变化。然后我尝试了各种各样的显示样式更改（虽然不是全部，因为我是CSS和idk的新手，哪个会做这个工作）。他们中的大多数似乎都不起作用。

此外，如果任何人都可以减少前两个框和底部两个框之间的差距，那也很好，但并非完全必要。

div元素maintext应该捕获左下方框中的所有段落，因此我希望该元素中的所有文本都具有该填充。

任何帮助都会很棒。感谢。

Answer 1

我会将box-sizing: border-box添加到nav和.maintext，然后将width: 80%; overflow: auto;添加到.maintext以使其位于nav旁边，然后如果您希望匹配该填充，只需使用与.maintext相同的填充h1。

@import url('https://fonts.googleapis.com/css?family=Lobster+Two');
#Cogna {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 60px;
  font-weight: bold;
  border: 2px solid black;
  padding: 40px 20px 10px 20px;
  margin-right: 0.5em;
  width: 20%;
  height: 20%;
}

h1 {
  font-family: 'Lobster Two';
  vertical-align: text-bottom;
  font-size: 20px;
  border: 2px solid black;
  height: 20%;
  padding: 4em 1em 1em 1em;
}

.maintext {
  padding: 1.58em;
  height: 46em;
  display: block;
  border: 2px solid black;
  width: 80%;
  overflow: auto;
  padding-left: 1em;
}

nav {
  float: left;
  font-family: 'Lobster Two', cursive;
  font-size: 1em;
  padding: 40px 20px 10px 20px;
  overflow-y: scroll;
  width: 20%;
  height: 46em;
  border: 2px solid black;
}

nav ul {
  list-style: none;
}

nav, .maintext {
  box-sizing: border-box;
}

<!DOCTYPE html>
<html>
<head>
    <title>Cogna</title>
    <link rel="stylesheet" type="text/css" href="Home.css">
</head>
<body>

<div>
    <div id="Cogna">Cogna</div>
    <h1>Home</h1>
</div>

<div>
    <nav>
        <ul>Home</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <ul>a</ul>
        <span style="display: block; height: 100%;"></span>
    </nav>
    <div class="maintext">
        <p style="margin-left: 16pt;">
            Hello.
        </p>
    </div>
</div>

</body>
</html>

填充不起作用

1 个答案: