Question

我正试图制作一个花哨的标题。在解释我的问题之前，您可以在JSFiddle看看它的外观。

此标题在中/大屏幕宽度方面非常出色，但问题出在屏幕宽度较小的情况下，文本不适合该宽度并被右侧div重叠。

这是html / css（与JSFIddle相同）。下面我将解释我想要实现的目标

HTML：

 <div class="header">
    <div class="left"></div>
    <div class="text">
      <span>TITLE</span>
    </div>
    <div class="right"></div>
  </div>

的CSS：

div.header{
  height:30px;
  font-size:30px;
  width:100%;
  margin-top:100px;
  display: block;
  margin-bottom:30px;
}
div.header .left{
  background-color: #D82B38;
  width:10%;
  height:30px;
  display: inline-block;
  float:left;
  border-radius:0 15px 0 0;
}
div.header .text{
  width:20%;
  display: inline-block;
  height:30px;
  float:left;
}
div.header .right{
  background-color: #D82B38;
  width:70%;
  height:30px;
  display: inline-block;
  float:right;
  border-radius: 0 0 0 15px;
}
div.header .text span{
  font-size:30px;
  color: #D82B38;
  position: relative;
  top:-5px;
  text-align:center;
  display: block;
  font-weight:500;
  letter-spacing:1px;
}

我想向div.text提供一些左右填充，并使其宽度取决于文本的大小，然后div.left和div.right取其宽度取决于屏幕的剩余宽度（总是左边的宽度比右边的宽度小很多），而不是总是具有相同的百分比。我知道我可以使用媒体查询在较小的屏幕中更改该百分比，但我知道媒体查询在Internet Explorer中不能很好地工作，我更愿意避免它们。

我尝试使用CSS来实现这一点，但我无法让它工作。如果我的问题不清楚，请告诉我，我会尽力澄清我的意思。

提前致谢！

EIDT：我不想为此使用javascript，我知道必须有一些方法来使用纯CSS实现它

Answer 1

灵活宽度（百分比）是响应式网页设计的关键，但在某些情况下，这不是可行的方法。特别是在这种情况下，您希望保持标题的右侧响应，同时左侧（包括文本）是静态的。这可以避免任何闪烁和移动，以及过多的@media查询。您可以通过使用calc函数来保持响应性。

这就是我所做的。我给了左侧和文本两者之间共享的350px宽度。（100px和250px）。 350px完全在任何智能手机的宽度范围内。我告诉右边100％ - 350px。这使得右侧尊重左侧并相应地进行调整。

SCSS / LESS - 如果您使用的是LESS或SCSS / SASS，那么您将获得真正的赢家，因为您可以将这两个固定宽度存储在变量中，然后如果您需要更改这些值，则可以使用LESS或SCSS / SASS会为你调整一切。

这是你的新CSS：

div.header{
  height:30px;
  font-size:30px;
  width:100%;
  margin-top:100px;
  display: block;
  margin-bottom:30px;
}
div.header .left{
  background-color: #D82B38;
  width:150px;
  height:30px;
  display: inline-block;
  float:left;
  border-radius:0 15px 0 0;
}
div.header .text{
  width:200px;
  display: inline-block;
  height:30px;
  float:left;
}
div.header .right{
  background-color: #D82B38;
  width: calc(100% - 350px);
  height:30px;
  display: inline-block;
  float:right;
  border-radius: 0 0 0 15px;
}
div.header .text span{
  font-size:30px;
  color: #D82B38;
  position: relative;
  top:-5px;
  text-align:center;
  display: block;
  font-weight:500;
  letter-spacing:1px;
}

以下是DEMO

中的样子

修改

作为替代选项，您可以分配宽度并使用媒体查询进行重新调整。这是您可以在旧版浏览器中使用的内容。为了使文本居中，你有2个选项，1。在我编辑之后在我的DEMO中描述。使用位置左和变换。如果这给你带来旧浏览器的问题，选项2是包装文本是另一个div和中心对齐其内容。再次参见DEMO以获取替代选项

Answer 2

您可以使用Flexbox

<强> CSS

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.flex-item {
  -webkit-flex: 1 auto;
  flex: 1 auto;
  vertical-align: middle;
}

.flex-item-fixed {
  -webkit-flex: 0 70px;
  flex: 0 70px;
  text-align: center;
}

.flex-item-fixed1 {
  -webkit-flex: 0 10%;
  flex: 0 10%;
}

.left {
  background-color: #D82B38;
  display: block;
  border-radius: 0 15px 0 0;
  height: 30px;
}

.right {
  background-color: #D82B38;
  height: 30px;
  display: inline-block;
  float: right;
  border-radius: 0 0 0 15px;
}

<强> DEMO HERE

Answer 3

此版本适用于IE8，但如果浏览器支持，则使用flex。

＆＃13;

div.header{
  display: table;
  height:30px;
  font-size:30px;
  width:100%;
  margin-top:100px;
  margin-bottom:30px;
}
div.header .left{
  display: table-cell;
  background-color: #D82B38;
  width:10%;
  height:30px;
  border-radius:0 15px 0 0;
}
div.header .text{
  display: table-cell;
  width:20%;
  height:30px;
}
div.header .right{
  display: table-cell;
  background-color: #D82B38;
  width:70%;
  height:30px;
  border-radius: 0 0 0 15px;
}
div.header .text span{
  font-size:30px;
  color: #D82B38;
  position: relative;
  top:-5px;
  text-align:center;
  display: block;
  font-weight:500;
  letter-spacing:1px;
}

@supports (display: flex) {

  div.header{
    display: flex;
  }
  div.header .left{
    display: block;
  }
  div.header .text{
    display: block;
    min-width: 90px;
  }
  div.header .right{
    display: block;
  }
  
}

＆＃13;

<div class="header">
    <div class="left"></div>
    <div class="text">
      <span>TITLE</span>
    </div>
    <div class="right"></div>
  </div>

＆＃13;

内联div填充宽度

3 个答案: