Question

我的div应该包含两个div（in-left和in-right），但是in-right不起作用。我怎么能把它与左边对齐？

#left {
  position: absolute;
  top: 76%;
  left: 20%;
  color: black;
  border: 2px solid black;
  border-radius: 15px 15px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 1em;
  text-align: center;
  background-image: url("pink.jpg");
  height: 1000px;
  width: 800px;
  background-size: 900px 1000px;
  border: 1px solid black;
  background-repeat: no-repeat;
  box-shadow: 7px 7px 18px white;
}

#in-left {
  top: 87%;
  left: 22%;
  color: black;
  font-size: 1.5em;
  text-align: left;
  height: 650px;
  width: 400px;
  font-family: AR CENA;
  border-right: 1px solid white;
}

#in-right {
  top: 87%;
  left: 50%;
  color: black;
  font-size: 1.5em;
  text-align: right;
  height: 650px;
  width: 400px;
  font-family: AR CENA;
}

<div id="left"><br>
  <center>
    <img src="acoe.jpg" alt="it's me" height="200" width="250"><img src="jer.jpg" alt="it's me" height="200" width="250"><img src="ako ulit.jpg" alt="it's me" height="200" width="250"></center>

  <div id="in-left">
    <center>
      <h2>
        Hobbies
      </h2>
    </center>
    <ul>
      <u><b><li>Biking &#128693;</li></u></b>
      I bike around the subdivision every other day, alone and sometimes with my friends. I really enjoy the solitude and the way the air hits my hair, and I can proudly say that biking is my relaxation technique.
      <u><b><li>&#128214; Reading books and short stories &#128214;</li></u></b>
      I usually spend my time indoors, and reading has been a big help for me to ease my boredom. I enjoy the horror genre because of the feeling of thrill and excitement it gives me. Reddit:
      <a href="https://www.reddit.com/r/nosleep"><img src="reddit.png" height="25" width="25"></a>
      <u><b><li>&#128253; Watching movies &#127909;</li></u></b>
      <u><b><li>&#127911; Listening to music &#127926;</li></u></b>

      <u><b><li>Playing Videogames &#127918;</li></u></b>

      <u><b><li>&#127828; Eating &#127859;</li></u></b>

    </ul>


  </div>
  <div id="in-right">
    <center>
      <h2>
        Interests:
    </center>
    </h2>

  </div>



</div>

Answer 1

使用CSS的float属性。感谢

float : right;

Answer 2

使用flexbox可帮助您轻松实现解决方案。检查代码段。

＆＃13;

div {
  border: 1px solid #ddd;
  padding: 10px;
}
.container {
  display: flex;
}
.in-left, .in-right {
  flex-grow: 1;
}

＆＃13;

<div class="container">
  <div class="in-left">
    Left
  </div>
  <div class="in-right">
    Right
  </div>
</div>

＆＃13;

Answer 3

有许多选项可以让您实现您在这里寻找的内容，但在我开始列出它们之前，就HTML和CSS提供了一个快速的建议：＆＃34;更多你试着这样做，它会变得越困难，试着寻找最简单的解决方案＆＃34;。

考虑到这一点，让我们寻找一些简单的解决方案，让您实现您所寻找的目标。

选项1：浮动

float是一个出色的属性，允许您在其父容器中对齐div个元素。它可以很好地工作，但是你需要小心，因为（如MDN文档所述）：

...元素取自网页的正常流程......

这意味着您的父容器的大小不会再包含div。要解决此问题，您可以在父{q} ::after伪元素上使用clear属性，这会强制它正确调整大小。

＆＃13;

.parent {
  background: red;
  color: white;
}

.parent::after {
  content: "";
  display: block;
  clear: both;
}

.left {
  float: left;
  background: blue;
  padding: 10px;
}

.right {
  float: right;
  background: green;
  padding: 10px;
}

＆＃13;

<div class="parent">
  <div class="left">
    My first div
  </div>
  <div class="right">
    My second div
  </div>
</div>

＆＃13;

选项2：内联块

下一个选项利用display属性，该属性允许您配置浏览器呈现元素的方式。具体来说，它允许您配置浏览器使用的渲染框。默认情况下，<span>元素使用inline显示模式，而div使用block显示模式。这些对应于（大致）水平和垂直布局排序，如以下示例所示：

＆＃13;

<div>
  <span>First</span>
  <span>Second</span>
</div>
<div>
  <span>Third</span>
  <span>Fourth</span>
</div>

＆＃13;

display: inline-block允许我们做的是指示浏览器正常渲染块，但是将它们水平排列，就好像它们是正常文本流的一部分一样。这非常有效，并且比选项3 （但不如选项1 ）更好地支持旧浏览器。

＆＃13;

.parent > div {
  display: inline-block;
}

.parent {
  background: red;
  color: white;
}

.first {
  background: blue;
  padding: 10px;
}

.second {
  background: green;
  padding: 10px;
}

＆＃13;

<div class="parent">
  <div class="first">First</div>
  <div class="second">Second</div>
</div>

＆＃13;

选项3：Flexbox

最酷的选项，虽然是最新的，因此旧版浏览器支持最少，但正在使用新的flexbox布局模式。它目前仍处于草稿状态，但很多现代浏览器support it already。

Flexbox可让您执行与选项2 相同的操作，但可以更好地控制事物的排列方式，它们之间的间距，它们如何流向其他线条等等。有很多可以涵盖的内容，我不会在这里做到这一点，但适用于你的部分是：

＆＃13;

.parent {
  display: flex;
  flex-direction: horizontal;
  justify-content: space-between;
  
  background: red;
  color: white;
}

.first {
  padding: 10px;
  background: blue;
}

.second {
  padding: 10px;
  background: green;
}

＆＃13;

<div class="parent">
  <div class="first">First</div>
  <div class="second">Second</div>
</div>

＆＃13;

由于这是一个学校项目，我的建议是你花一些时间阅读（并试验）这里的各种选项，并了解他们的工作。你最终使用哪一个比首先学习如何使用它们要重要得多。祝你好运。

Answer 4

我已更新您的代码，因此它看起来会更清晰。我还为CSS创建了一个类inlineblock，并添加到#left父元素内的两个div元素中。在您的HTML代码中，存在语法错误，例如closing tags。

以下是我为您创建的链接https://jsfiddle.net/beljems/fyyqvm1t/13/。

希望这会对你有所帮助:)。

Answer 5

尝试使用＆＃34; float：left＆＃34;

这里你有使用它的教程 CLICK

如果你想删除＆＃34; float＆＃34;在网站的休息空间你需要使用＆＃34; clear：both＆＃34;

嵌套div但不起作用？

5 个答案:

选项1：浮动

选项2：内联块

选项3：Flexbox