html - 如何为元素设置宽度自动

Question

我有 3 个 div 标签。

<div id="thread">
          <div id="left-panel" style="width: auto;">a</div>
          <div id="content" style="width:1024px; margin: auto;">c</div>
          <div id="right-panel" style="width: auto">b</div>
</div>

我想要div#left-panel，div#right-panel符合div#content. Div#left-panel和div#right-panel屏幕分辨率变化时的自动宽度。

请帮我！

Answer 1

你考虑过 CSS 媒体查询吗？（确保将元标记放在头部）

<meta name = "viewport" content = "width=device-width, initial-scale=1.0">

@media(min-width: 1024px) {
    #content {}
    #left-panel {}
    #right-panel {}
}

@media(max-width: 1023px) {
    #content {}
    #left-panel {}
    #right-panel {}
}

Answer 2

<div id="thread" style="float:left;width:100%">
          <div id="left-panel" style="width:10%;float:left">a</div>
          <div id="content" style="width:70%;float:left;">c</div>
          <div id="right-panel" style="width: 20%">b</div>
</div>

Answer 3

对于您的当前标记加 CSS 组合，您不能水平对齐三个 div。

为了水平对齐 div，您必须遵循一条规则。

(Total(width + margin + padding) of divs to be horizontally aligned ) 
                     <= Total width of the Parent Container.

现在，您想覆盖整个水平屏幕宽度（没有水平滚动条），然后您可以为您的 div 和float:left它们提供百分比宽度，即

      <div id="thread" style="width: 100%;">
           <div id="left-panel" style="width: 10%">a</div>
           <div id="content" style="width:78%;">c</div>
           <div id="right-panel" style="width: 10%">b</div>
      </div>

看这个演示