div 需要有一个右边距，同时填充白色并与另一个 div 相邻答案

【问题标题】：div needs to have a right margin while filled with white and adjacent to another divdiv 需要有一个右边距，同时填充白色并与另一个 div 相邻
【发布时间】：2019-07-12 15:30:52
【问题描述】：

基本上，我有一个 div 需要放在页面上的另一个元素旁边。此外，这个 div 需要完全着色为白色，并在其顶部放置一个段落以供参考。这是我看到的链接，圆圈区域是我需要标题填写的内容。 https://imgur.com/wAtkvBl

body {
    margin: 0;
    padding: 0;
    background-color: #2E2E46;
}

#nav_top {
    background-color: #000000;
    left: 0px;
    margin: 0 auto;
    margin-bottom: 0;
    padding: 0;
    height: 75px;
    color: #FFFFFF;
    position: absolute;
    top: 0;
    width: 100%;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-indent: 0;
    line-height: 0%;
}

#h1 {
    margin-left: 76px;
    margin-top: 40px;
    width: 200px;
}

#help_nav {
    float: right;
    top: 0px;
    margin-top: 20px;
    font-style: normal;
    font-weight: lighter;
    font-size: small;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    text-decoration: none;
    margin-right: 35px;
}

#logo {
    width: 59px;
    float: left;
    padding-top: 7px;
    padding-left: 12px;
}
#pagetitle {
    margin-left: 75px;
    background-color: #553D53;
    color: #FFFFFF;
    margin-top: 75px;
    opacity: 1;
    float: none;
    height: 350px;
    position: absolute;
    margin-right: 75px;
}

#bgc {
    margin-right: 75px;
    float: left;
    width: 100%;
    height: 15px;
}

#wires {
    float: right;
    margin-top: 35px;
    width: 300px;
}

#titletext {
    float: left;
    margin-top: 125px;
    position: absolute;
    z-index: 5;
    margin-left: 100px;
    color: #FFFFFF;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bolder;
}

#titlehead {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bolder;
    font-size: xx-large;
}

#subtext {
    position: absolute;
    z-index: 6;
    margin-top: 200px;
    margin-left: 105px;
    color: #FFFFFF;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 2;
    font-size: xx-small;
    text-decoration: none;
}

#sidenav {
    padding-top: 427px;
    padding-left: 75px;
}

#navbartitle {
    float: left;
    position: absolute;
    margin-left: 55px;
    color: #FFFFFF;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: xx-large;
}
#content {
    position: absolute;
    margin-left: 355px;
    margin-right: 75px;
    background-repeat: repeat;
    background-position: 0% 0%;
    background-size: contain;
    background: white;
    float: none;
    padding-right: 1px;
    top: 1px;
    margin-top: 428px;
}

#subtexttext {
    font-size: medium;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-weight: bold;
}

<body>
    <div id="nav_top">
        <div id="help_nav">
            <h2><a href="#" style="color:white">Contact</a> | <a href="#" style="color:white">Help</a> | <a href="#" style="color:white">Report</a>
            </h2>
        </div>
        <div id="logo">
            <img src="images/Asset_1.png" width="50" height="58" alt="" />
        </div>
        <div id="h1">
            <h1>A.H.E.M</h1>
        </div>
    </div>
    <div id="titletext">
        <h2 id="titlehead">This is the content for Layout H2 Tag</h2>
    </div>
    <div id="subtext">
        <h2 id="subtexttext">This is the content for Layout H2 Tag</h2>
    </div>
    <div id="pagetitle">
        <img id="wires" src="images/wires.png" width="275" height="303" alt="" />
        <img id="bgc" src="images/Artboard 1.jpg" width="150" height="86" alt="" />
    </div>
    <div id="sidenav">
        <h2 id="navbartitle"> Navigation</h2>
        <img src="images/nav2.png" width="280" height="648" alt="" />
    </div>
    <div id="content">
        <h2> Dogs</h2>
    </div>
</body>

Working JS Fiddle demo

div 命名内容和 div 名称 sidenav 在同一页面上彼此相邻。我需要 #content 在右侧缩进 75px 和在左侧缩进 355px 以与其他部分对齐。如果我将它设置为绝对，我可以正确定位 div，但它不会填满整个背景。如果它是静态的，它将填充到正确的大小，但它不能坐在#sidenav 旁边。我已经阅读了很多不同的想法和解决方案，但根本无法让它发挥作用。

我对 HTML 和 CSS 很陌生，所以如果这是一个简单的问题，我深表歉意，但我已经在这两个小时了。感谢所有反馈。

【问题讨论】：

在您的 CSS 中，您可以像这样组合 #content 的背景属性：background: white repeat;。 background-size: contain; 用于图像，background-position: 0% 0%; 是默认值
position: absolute 将您的元素从页面流中取出。我几乎不建议将它用于不应该位于不同元素之上的元素。尝试查看 flexbox。它是订购不同元素的最佳方式之一。这是一个简单的指南：css-tricks.com/snippets/css/a-guide-to-flexbox
我觉得这有点令人困惑。如果您显示具有所需输出的布局会更容易。
如果你最终使用position: absolute。不要以利润定位它们。只需使用top: 428pxleft: 355px
@Becky imgur.com/wAtkvBl 这是我的完整布局的链接。蓝色圆圈是需要填写的

标签： html css

【解决方案1】：

以下内容可能对您有所帮助，请通读什么是绝对位置和相关位置，

https://jsfiddle.net/psv6xo9w/

body {
    margin: 0;
    padding: 0;
    background-color: #2E2E46;
}

.container {
  margin: 0 75px;
}

#nav_top {
    background-color: #000000;
    left: 0px;
    margin: 0 auto;
    margin-bottom: 0;
    padding: 0;
    height: 75px;
    color: #FFFFFF;
    top: 0;
    width: 100%;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-indent: 0;
    line-height: 0%;
}

#h1 {
    margin-left: 76px;
    padding-top: 20px;
    width: 200px;
}

#help_nav {
    float: right;
    top: 0px;
    margin-top: 20px;
    font-style: normal;
    font-weight: lighter;
    font-size: small;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    text-decoration: none;
    margin-right: 35px;
}

#logo {
    width: 59px;
    float: left;
    padding-top: 7px;
    padding-left: 12px;
}
#pagetitle {
    background-color: #553D53;
    color: #FFFFFF;
    opacity: 1;
    float: none;
    height: 350px;
    position: relative;
}

#bgc {
    float: left;
    width: 100%;
    height: 15px;
}

#wires {
    margin-top: 35px;
    width: 300px;
    position: absolute;
    right: 0;
}

#titletext {
    float: left;
    padding-top: 20px;
    padding-left: 100px;
    color: #FFFFFF;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bolder;
    width: 100%;
}

#titlehead {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bolder;
    font-size: xx-large;
}

#subtext {
    color: #FFFFFF;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 2;
    font-size: xx-small;
    text-decoration: none;
    display: block;
    float: left;
    width: 100%;
    padding-left: 100px;
}

#sidenav {
    float: left;
    padding: 0px 29px;
    width: 25%;
    background: #696969;
}

#navbartitle {
    margin-left: 55px;
    color: #FFFFFF;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: xx-large;
}
#content {
    background-repeat: repeat;
    background-position: 0% 0%;
    background-size: contain;
    background: white;
    float: left;
    top: 1px;
    width: 70%
}

#subtexttext {
    font-size: medium;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-weight: bold;
}

.row {
  float: left;
    width: 100%;
}

<div id="nav_top">
        <div id="help_nav">
            <h2><a href="#" style="color:white">Contact</a> | <a href="#" style="color:white">Help</a> | <a href="#" style="color:white">Report</a>
            </h2>
        </div>
        <div id="logo">
            <img src="images/Asset_1.png" width="50" height="58" alt="" />
        </div>
        <div id="h1">
            <h1>A.H.E.M</h1>
        </div>
    </div>
    <div class="container">
      <div id="pagetitle">
          <div id="titletext">
              <h2 id="titlehead">This is the content for Layout H2 Tag</h2>
          </div>
          <div id="subtext">
              <h2 id="subtexttext">This is the content for Layout H2 Tag</h2>
          </div>
          <img id="wires" src="images/wires.png" width="275" height="303" alt="" />
          <img id="bgc" src="images/Artboard 1.jpg" width="150" height="86" alt="" />
      </div>
      <div class="row">
        <div id="sidenav">
          <h2 id="navbartitle"> Navigation</h2>
          <img src="images/nav2.png" width="280" height="648" alt="" />
        </div>
        <div id="content">
            <h2> Dogs</h2>
        </div>  
      </div>
    </div>

【讨论】：