时间戳

首页 > 解决方案 > 添加文本意外地将容器向下推

html - 添加文本意外地将容器向下推

问题描述

我正在设计一个网页，它有两个并排的容器，中间没有间隙。左边的容器占据了大约 75% 的宽度，而右边的容器占据了大约 25% 的宽度。

这是我当前的 HTML 和 CSS 代码：

<!doctype html>

<style>
.container-left {
  display: inline-block;
  width: 850px; 
  height: 550px;
  background: #E5F2FD; 
  margin-left: 100px;
  margin-top: 150px;
  text-align: center;
}

.welcome-message
{
    color: #026DBA;
    font-size: 25px;
    font-family: "Calibri";
}
.container-right {
  display: inline-block;
  width: 350px; 
  height: 550px; 
  background: #E5F2FD;
  margin-top: 150px;
  margin-right: 100px;
  text-align: center;   
}
</style>


<div class="container-left">

<p class="welcome-message"> Welcome back, Joe! </p>


</div><div class="container-right">

<p> Choose one... </p>

</div>


</html>

如果您运行此代码，则会添加包含“欢迎回来，乔！”的 p 标签。导致右侧的容器意外向下移动。但是，如果您删除这行代码，这两个容器将恢复为彼此内联。我想知道 1.) 为什么会这样，以及 2.) 如何解决这个问题。

谢谢！

标签： htmlcss

解决方案

最简单的解决方案是将它们的宽度属性更改为最大宽度，更好的解决方案是 flexbox

<style>

.container {
display: flex;
flex-flow: row wrap;
}

.column-left {
flex: .75;
}

.column-right {
flex:.25;
}
</style>
<body class=“container”&gt;
<div class=“column-left”&gt;</div>

<div class=“column-right”&gt;</div>

</body>

那里有更好的例子，但基本上你的右容器向下移动，因为左容器的宽度为 75%，这意味着它还有 25% 的空间需要扩展

推荐阅读