Question

我有以下JSFiddle：http://jsfiddle.net/eotamvwy/

HTML：

<div class="infobox-container">
    <div class="triangle-l"></div>
    <div class="triangle-r"></div>
    <div class="infobox">
        <h3><span>This is the Header</span></h3>
        <p>This is the content of the infobox.<p/>
    </div>
</div>

如何修改CSS以使其响应？

我有一个具有以下风格的div：

width: 98%
padding: 0 1% 0 1%

我想在里面插入infobox-container并将其拉伸100％并根据上面的div调整大小。

Answer 1

使用百分比单位表示响应度，对于不需要额外元素的三角形，您可以在:after上使用:before和.infobox h3：伪元素。

enter image description here

的 Updated Fiddle

body { width: 100%; margin: 0; } .main-container { width: 98%; padding: 0 1% 0 1%; text-align: center; } .infobox-container { position: relative; display: inline-block; margin: 0; padding: 0; width: 100%; } .infobox { width: 80%; padding: 10px 5px 5px 5px; margin: 10px; position: relative; z-index: 1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); background: #424242; background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242)); background-image: -moz-linear-gradient(top, #6a6a6a, #424242); color: #fff; font-size: 90%; } .infobox h3 { position: relative; width: calc(100% + 22px); color: #fff; padding: 10px 5px; margin: 0; left: -15px; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55); background: #3198dd; background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd)); background-image: -moz-linear-gradient(top, #33acfc, #3198dd); font-size: 160%; text-align: center; text-shadow: #2187c8 0 -1px 1px; font-weight: bold; } .infobox h3:before, .infobox h3:after { content: ''; border-color: transparent #2083c2 transparent transparent; border-style: solid; border-width: 12px; height: 0; width: 0; position: absolute; left: -12px; top: 100%; transform: translateY(-50%); z-index: -1; /* displayed under infobox */ } .infobox h3:after { border-color: transparent transparent transparent #2083c2; left: 100%; margin-left: -12px; } .infobox a { color: #35b0ff; text-decoration: none; border-bottom: 1px dotted transparent; } .infobox a:hover, .infobox a:focus { text-decoration: none; border-bottom: 1px dotted #35b0ff; }

<div class="main-container"> <div class="infobox-container"> <div class="infobox"> <h3><span>This is the Header</span></h3> <p>This is the content of the infobox.</p> </div> </div> </div>

Answer 2

我认为您可以进行一些小的更改，使所有尺寸至少对内容做出响应：

最重要的变化：

使用＆＃39; Calc＆＃39;设置宽度。支持是合理的（参见caniuse），但你也可以使用负边距（或者可能还有其他方式）来解决这个问题。

.infobox h3 {
    width: calc(100% + 20px);
}

右箭头可以通过将right设置为-12px来解决，就像左边的left: -12px一样。

.infobox-container .triangle-r {
    right: -12px;
}

＆＃13;

.infobox-container {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: auto;
}
.infobox {
    padding: 10px 5px 5px 5px;
    margin:10px;
    position: relative;
    z-index: 90;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background: #424242;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
    color: #fff;
    font-size: 90%;
}
.infobox h3 {
    position: relative;
    width: calc(100% + 20px);
    color: #fff;
    padding: 10px 5px;
    margin: 0;
    left: -15px;
    z-index: 100;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background: #3198dd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
    background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
    font-size: 160%;
    text-align: center;
    text-shadow: #2187c8 0 -1px 1px;
    font-weight: bold;
}
 
.infobox-container .triangle-l {
    border-color: transparent #2083c2 transparent transparent;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    left: -13px;
    top: 54px;
    z-index: 2; /* displayed under infobox */
}
.infobox-container .triangle-r {
    border-color: transparent transparent transparent #2083c2;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    right: -12px;
    top: 54px;
    z-index: 2; /* displayed under infobox */
}
.infobox a {
    color: #35b0ff;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
    text-decoration: none;
    border-bottom: 1px dotted #35b0ff;
}

＆＃13;

<div class="infobox-container">
    <div class="triangle-l"></div>
    <div class="triangle-r"></div>
    <div class="infobox">
        <h3><span>This is the Headewefewfewfewfewfewfewfr</span></h3>
        <p>This is the content of the infobox.</p>
    </div>
</div>

＆＃13;

Answer 3

如果您希望此标题功能区具有响应性，则需要远离使用固定宽度，而是组合width:100%;和max-width: 270px;（或其他）。

当您将width属性定义为270px时，您告诉浏览器您希望此特定元素的最小和最大宽度均为270px。如果你正在思考，你真正想要的是你的元素尽可能地扩展（width:100%），但是最大值为270px（max-width: 270px;）。

这是响应位。

你真正追求的是更接近这一点：

http://jsfiddle.net/TheIronDeveloper/eotamvwy/3/

* {
    box-sizing: border-box;
}
.infobox-container {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    max-width: 500px;
    width: 100%;
}
.infobox {
    padding: 3em 5px 5px;
    margin:10px;
    position: relative;
    z-index: 90;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background: #424242;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
    color: #fff;
    font-size: 90%;
}
.infobox-ribbon {
    position: absolute;
    top: 10px;
    width: 100%;
    color: #fff;
    padding: 10px 5px;
    margin: 0;
    z-index: 100;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background: #3198dd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
    background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
    font-size: 160%;
    text-align: center;
    text-shadow: #2187c8 0 -1px 1px;
    font-weight: bold;
}
 
.infobox-container .triangle-l {
    border-color: transparent #2083c2 transparent transparent;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    left: -12px;
    top: 45px;
    z-index: 0; /* displayed under infobox */
}
.infobox-container .triangle-r {
    border-color: transparent transparent transparent #2083c2;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    right: -12px;
    top: 45px;
    z-index: 0; /* displayed under infobox */
}
.infobox a {
    color: #35b0ff;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
    text-decoration: none;
    border-bottom: 1px dotted #35b0ff;
}

<div class="infobox-container">
    <div class="triangle-l"></div>
    <div class="triangle-r"></div>
    <h3 class="infobox-ribbon">This is the Header</h3>
    <div class="infobox">
        <p>This is the content of the infobox.</p>
    </div>
</div>

我在这里做了一些事情：

我申请* {box-sizing:border-box;}，这使得元素“模具化”到我告诉他们的宽度（不论边距），more details here
我从信息框中取出了h3色带，并将其位置改为绝对位置。我的理由是h3-ribbon需要符合信息盒容器的宽度，而不是信息框本身。这样，无论宽度如何，色带都会与其母带一致，并且信息框可以占据其100％+边距（两侧应始终均匀）。
1. 就像我之前提到的，我将信息框容器的固定宽度更改为width:100%;max-width:500px;。如果您尝试调整尺寸，则功能区会保持不动。

如何使标题功能区响应

3 个答案: