一行两个div，但是一个div是固定大小的，怎么办？ [复制]答案

【问题标题】：Two div in one line, but one div is fixed size, how to? [duplicate]一行两个div，但是一个div是固定大小的，怎么办？ [复制]
【发布时间】：2021-06-06 23:54:25
【问题描述】：

对不起，我会说一点英语。我想在一行中看到左右 div。

HTML：

<div id="header">header</div>
<div id="container">
 <div id="left"></div>
 <div id="right"></div>
</div>
<div id="footer">footer</div>

CSS：

#container { max-width: 1700px; }
 #left { width: 100%-314px; }
 #right { width: 314px; }

如果没有#right div，我想工作。见：

HTML (2):

<div id="header">header</div>
<div id="container">
 <div id="left"></div>
</div>
<div id="footer">footer</div>

怎么做？

【问题讨论】：

这能回答你的问题吗？ Align two inline-blocks left and right on same line

标签： html css

【解决方案1】：

可能的解决方法是使用 span 标签，在您的代码中使用如下：

<div id="header">header</div>
<div id="container">
 <span id="left"></span>
 <span id="right"></span>
</div>
<div id="footer">footer</div>

不需要固定大小或任何东西。

【讨论】：

对不起，我需要的是 DIV，而不是 SPAN。不仅仅是文字。更多 subDIV。

【解决方案2】：

你的意思是这样的吗？

我只是选择容器内的 div 并给它们显示：inline-block

#container { max-width: 1700px; }
#left { width: 100%-314px; }
#right { width: 314px; }
#container div {
     display: inline-block;
 }

<div id="header">header</div>
<div id="container">
   <div id="left"><p>|left elem|</p></div>
   <div id="right"><p>|right elem|</p></div>
</div>
<div id="footer">footer</div>

【讨论】：

【解决方案3】：

css 网格怎么样？

.container {
  display: grid;
  grid-template-columns: 1fr auto;
}

.right {
  width: 314px;
}

<div class="container">
  <div class="left">A</div>
  <div class="right">B</div>
</div>

【讨论】：

【解决方案4】：

您可以使用flexbox，请确保为您的容器设置display:flex，如果您想将您的项目与中间的空间对齐，您可以设置justify-content:space-between。

#container {
  display: flex;
  max-width: 1700px;
  justify-content: space-between;
}

#left {
  background-color: green;
  width: 314px;
}

#right {
  background-color: red;
  width: 314px;
}

<div id="header">header</div>
<div id="container">
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>

【讨论】：

【解决方案5】：

这应该适合你！

#container {
 max-width: 1700px;
 display: flex;
 }
 #left {
 width: calc(100% - 314px);
 }
 #right {
 width: 314px;
 }

代码解释：

display:flex ：flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间。

calc(100%-314px) ：calc() 函数执行可用于属性的计算。

希望对你有所帮助！

【讨论】：

【解决方案6】：

您可以通过CSS flex 属性来做到这一点。 div 是 block 级别元素，用于在一行中获取 div 您可以将 div 设置为 display:inline-block; 或 inline 检查下面的示例。

.flex-container {
            display: flex;
            height:400px;
            flex-flow: column wrap;
            background-color: green;
            align-content: space-between;
        }
          
        .flex-container > div {
            background-color: #fff;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
.container{
border:1px solid #000;
height:500px !important;
padding:20px;
}

.left{
margin:10px;
background:#f00;
padding:50px;
color:#fff;
float:left;
}

.right{
margin:10px;
background:#f00;
padding:50px;
color:#fff;
float:right;
}

<h1>Example 1</h1>
<div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div> 
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div> 
        <div>8</div> 
</div>

<h1>Example 2</h1>
<div class="container">
  <div class="left">
    <h3>Left</h3>
  </div>

  <div class="right">
    <h3>Right</h3>
  </div>
  
  <div class="left">
    <h3>Left</h3>
  </div>

  <div class="right">
    <h3>Right</h3>
  </div>
  
</div>

【讨论】：