Html 如果右侧的div上有内容,则位于左侧的居中div

Html 如果右侧的div上有内容,则位于左侧的居中div,html,css,Html,Css,我有一个div在中间,另一个在右边,可能有一些内容。如果右边的有内容,中间的需要向左移动。最后,两个部门的内容需要放在中心位置 例如:我在中心有一个搜索框。如果我有一个搜索结果-结果和搜索框需要在中心。所以搜索框在左边移动了一点 我怎样才能用CSS制作呢 一种方法是使用text align:center和display:inline block。这里有一个以两个元素为中心的小提琴:。这里有一个稍微不同的提琴,删除了“text”div: HTML: 你有密码吗?你有两个div。div1中有一个表单

我有一个div在中间,另一个在右边,可能有一些内容。如果右边的有内容,中间的需要向左移动。最后,两个部门的内容需要放在中心位置

例如:我在中心有一个搜索框。如果我有一个搜索结果-结果和搜索框需要在中心。所以搜索框在左边移动了一点


我怎样才能用CSS制作呢

一种方法是使用
text align:center
display:inline block
。这里有一个以两个元素为中心的小提琴:。这里有一个稍微不同的提琴,删除了“text”div:

HTML:


你有密码吗?你有两个div。div1中有一个表单(搜索字段)。div2在开头有一个结果。div2为空,因此div1位于屏幕中央。当div2有一些结果时,div1应该向左移动一点,以便为结果留出空间。现在,这两个部分的内容应该是集中的,请尝试一些东西,并告诉我什么时候我可以提供帮助。Stackoverflow不是一个人人都为你编码的慈善机构。@NikolayTsonev:请编辑你的问题并发布标记。
<div class = "container">
    <input type = "text" />
    <div>
        Nam at justo dignissim, dapibus lorem eget, consectetur metus. Suspendisse vitae massa a nunc congue pulvinar non luctus mi. Nam turpis ex, laoreet tempor justo ac, cursus convallis urna. Sed eros ligula, congue ut lacinia auctor, porttitor ut quam. Nullam maximus, dui in eleifend viverra, est augue vestibulum est, id lacinia nibh ante vel velit. Aenean vitae sem ipsum. In porta felis urna, vel tincidunt odio aliquam feugiat.
    </div>
</div>
.container {
    white-space: nowrap;
    text-align: center;
}

.container > * {
    display: inline-block;
}

.container > input {
    width: 30%;
    vertical-align: top;
}

.container > div {
    width: 40%;
    text-align: left;
    white-space: normal;
    vertical-align: top;
    border: 1px dotted gray;
}