如何强制块容器始终采用所有可用宽度? [英] How to force a block container to take always all the available width?

查看：40
本文介绍了如何强制块容器始终采用所有可用宽度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我目前正在练习的 HTML 代码.CSS 不完整，因为我不知道如何做我想做的:

.container {保证金:自动；宽度:700px；边框:纯蓝色2px；}.container div {填充:10px 0;垂直对齐:顶部；}#橙子 {背景色:珊瑚色；}#蓝色的 {背景颜色:浅蓝色；}.container >div .content {边框:黑色虚线1px；高度:100px；宽度:250px；保证金:自动；显示:块；文本对齐:居中；}

<div id="橙色"><div class="content">content<br/>宽度:250px</div>
<div id="蓝色"><div class="content">content<br/>宽度:250px</div>

当容器足够大时，橙色和蓝色块应该并排放置，如下所示:

如果我减小容器的宽度，橙色和蓝色块内的水平边距将缩小，直到它们的边框与内容的边框相交:

这是当我减少容器宽度时我想要获得的:

有人知道怎么做吗?如果可能，没有 JS.而且容器不依赖于屏幕大小，所以我不能使用基于设备宽度的媒体查询.当然，该解决方案必须与尽可能多的网络浏览器兼容(包括最新版本的 IE).

我已经考虑过使用 flexbox 但我希望我能找到一个没有的解决方案.顺便说一句，我对一种在 CSS 代码中编写仅适用于 IE9 及以下的特定规则感兴趣的方法.

编辑 2:似乎不可能通过以下约束来做我想做的事情:

  • 没有JS
  • 对屏幕大小没有限制，而是对容器大小进行限制

所以我想我将不得不放弃其中至少一个......

解决方案

使用 flexbox 的解决方案.

如果您希望拥有特定于 IE9 及以下的样式，有 2 个选项:

  1. 具有特定于 IE 9 及更低版本的单独样式表(.css 文件)，在 HTML 中引用它 - 仅通过 CSS 定位 IE9

  2. 以这种方式编辑 CSS - https://css-技巧.com/snippets/css/browser-specific-hacks

.container {显示:弹性；背景颜色:绿色；justify-content: 空间环绕；填充:10px；}#橙子 {背景色:珊瑚色；高度:100px；最小宽度:250px；文本对齐:居中；边距:5px；}#蓝色的 {背景颜色:浅蓝色；高度:100px；最小宽度:250px；文本对齐:居中；边距:5px；}@media(最大宽度:500px){.容器 {flex-flow:行包装；}}

<div id="橙色"><div class="内容">内容<br/>宽度:250px

<div id="蓝色"><div class="内容">内容<br/>宽度:250px

Here is the HTML code I'm currently practising on. The CSS is not complete since I don't know how to do what I want to :

.container {
  margin: auto;
  width: 700px;
  border: solid blue 2px;
}
.container div {
  padding: 10px 0;
  vertical-align: top;
}
#orange {
  background-color: coral;
}
#blue {
  background-color: lightblue;
}
.container > div .content {
  border: dotted black 1px;
  height: 100px;
  width: 250px;
  margin: auto;
  display: block;
  text-align: center;
}

<div class="container">
  <div id="orange">
    <div class="content">content
      <br />width: 250px</div>
  </div>
  <div id="blue">
    <div class="content">content
      <br />width: 250px</div>
  </div>
</div>

When the container is large enough, the orange and blue blocks should stand side by side, like this :

If I reduce the width of the container, the horizontal margin inside the orange and blue blocks will shrink until their border meet the content's border :

Here is what I want to obtain when I reduce a bit more the container width :

Does anyone know how to do this ? If possible, without JS. And the container does not depend on the screen size, so I can't use media queries based on the device width. And, of course, the solution must be compatible with as many web browsers as possible (including the latest versions of IE).

Edit: I've considered using flexbox but I was hoping I could find a solution without. By the way, I would be interested by a way to write, in the CSS code, specific rules which apply only on IE9 and below.

Edit2: It seems it is not possible to do what I want with the following constraints :

So I guess I will have to drop at least one of these...

解决方案

Solution using flexbox.

In case you wish to have styles specific to IE9 and below, there are 2 options:

  1. Have seperate stylesheet(.css file) specific to IE 9 and below, reference it in HTML - Target IE9 Only via CSS

  2. Edit CSS in this way - https://css-tricks.com/snippets/css/browser-specific-hacks

.container {
  display: flex;
  background-color: green;
  justify-content: space-around;
  padding: 10px;
}
#orange {
  background-color: coral;
  height: 100px;
  min-width: 250px;
  text-align: center;
  margin: 5px;
}
#blue {
  background-color: lightblue;
  height: 100px;
  min-width: 250px;
  text-align: center;
  margin: 5px;
}
@media (max-width: 500px) {
  .container {
    flex-flow: row wrap;
  }
}

<div class="container">
  <div id="orange">
    <div class="content">
      content
      <br/>width: 250px
    </div>
  </div>
  <div id="blue">
    <div class="content">
      content
      <br/>width: 250px
    </div>
  </div>
</div>

这篇关于如何强制块容器始终采用所有可用宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆