Question

我正在设置一个带有html + css的标题框。我希望所有内容都在标题框的边框内，除了标题（资源）我该怎么做？

我希望标题（资源）能够中断顶部边框，我希望它能够居中并在左侧和右侧有一些填充。

这是我的jsfiddle：http://jsfiddle.net/huskydawgs/0zfwf2dk/50/

    .resources-box {
      padding: 8px;
      background-color: #e2e3e4;
      width: 100%;
      padding: 20px 0;
      overflow: hidden;
    }
    .column-resources-box {
      width: 193px;
      float: left;
      margin: 15px;
      font-size: 0.9em;
    }
    .column-resources-box img {
      border: 1px solid #2251a4;
    }
    h4 {
      font-family: Georgia, Helvetica, Arial;
      font-size: 1.1em;
      font-weight: normal;
      margin: 1em 0 .6em 0;
    }
    h4.resources-bar a {
      font-family: Georgia;
      font-size: 11px !important;
      color: #ffffff !important;
      background-color: #2251a4;
      padding-top: 4px;
      padding-bottom: 4px;
      text-align: center;
      text-transform: uppercase;
      display: block;
    }
    h4.resources-bar a:hover {
      background-color: #f66511;
      color: #fff !important;
    }
    .title_box {
      border: #f66511 1px dotted;
      padding: 0 5px;
    }
    .title_box #summary {
      position: relative;
      top: -0.5em;
      margin-left: 1em;
      display: inline;
      background-color: white;
      color: #2251a4;
      font-family: SegoeBold, Helvetica, Arial;
      font-size: 26px;
      line-height: 34px;
      margin: 0 0 10px 0;
      text-align: center;
    }
    .title_box #content {}

<div class="title_box" id="resoruces">
  <div id="summary">Resources</div>
  <div class="column-resources-box">
    <a href="http://en.wikipedia.org/wiki/Apple">
      <img alt="Apples" height="73" src="http://www.hapadesign.com/images/apples.jpg" width="193" />
    </a>
    <h4 class="resources-bar">
            <a href="http://en.wikipedia.org/wiki/Apple">WEBINAR</a></h4>
    <p align="center"><strong><a href="http://en.wikipedia.org/wiki/Apple">Apples</a></strong>
    </p>
  </div>
  <div class="column-resources-box">
    <a href="http://en.wikipedia.org/wiki/Banana">
      <img alt="Bananas" height="73" src="http://www.hapadesign.com/images/bananas.jpg" width="193" />
    </a>
    <h4 class="resources-bar">
            <a href="http://en.wikipedia.org/wiki/Banana">WEBINAR</a></h4>
    <p align="center"><strong><a href="http://en.wikipedia.org/wiki/Banana">Bananas</a></strong>
    </p>
  </div>

  <div class="column-resources-box">
    <a href="http://en.wikipedia.org/wiki/Orange">
      <img alt="Orange" height="73" src="http://www.hapadesign.com/images/Oranges.jpg" width="193" />
    </a>
    <h4 class="resources-bar">
            <a href="http://en.wikipedia.org/wiki/Orange">WEBINAR</a></h4>
    <p align="center"><strong><a href="http://en.wikipedia.org/wiki/Orange">Orange</a></strong>
    </p>
  </div>

  <div class="column-resources-box">
    <a href="http://en.wikipedia.org/wiki/Pineapple">
      <img alt="Pineapple" height="73" src="http://www.hapadesign.com/images/Pineapples.jpg" width="193" />
    </a>
    <h4 class="resources-bar">
            <a href="http://en.wikipedia.org/wiki/Pineapple">WEBINAR</a></h4>
    <p align="center"><strong><a href="http://en.wikipedia.org/wiki/Pineapple">Pineapple</a></strong>
    </p>
  </div>
</div>

Answer 1

您必须添加clear属性才能清除已应用于left的{{1}} float。

.column-resources-box

.clear { 
  clear: left;
}

}
.resources-box {
  padding: 8px;
  background-color: #e2e3e4;
  width: 100%;
  padding: 20px 0;
  overflow: hidden;
}
.column-resources-box {
  width: 193px;
  float: left;
  margin: 15px;
  font-size: 0.9em;
}
.column-resources-box img {
  border: 1px solid #2251a4;
}
h4 {
  font-family: Georgia, Helvetica, Arial;
  font-size: 1.1em;
  font-weight: normal;
  margin: 1em 0 .6em 0;
}
h4.resources-bar a {
  font-family: Georgia;
  font-size: 11px !important;
  color: #ffffff !important;
  background-color: #2251a4;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  text-transform: uppercase;
  display: block;
}
h4.resources-bar a:hover {
  background-color: #f66511;
  color: #fff !important;
}
.title_box {
  border: #f66511 1px dotted;
  padding: 0 5px;
}
.title_box #summary {
  position: relative;
  top: -0.5em;
  margin-left: 1em;
  color: #2251a4;
  font-family: SegoeBold, Helvetica, Arial;
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 10px 0;
  text-align: center;
  width: 100%;
}
#summary .summary_content {
  background-color: white;
  display: inline-block;
}
.title_box #content {}
.clear {
  clear: left;
}

什么是浮动和清除？

如果你看一个典型的杂志，你会看到图像说明   文章，文字在他们周围流动。 CSS中的float属性   创建是为了在网页上允许这种样式的布局。漂浮一个   图像 - 或任何其他元素 - 推动它到一边和   让文本在另一边流动。清除浮动元素意味着   如有必要，将其推下，以防止它出现在旁边   漂浮。虽然浮动是用于任何元素，   设计师最常用它来实现多列布局   无需滥用表格标记。

参考：w3.org - Floats and clearing - CSS-Tricks - What is "Float"?

Answer 2

不确定你想要什么。这很接近吗？

jsFiddle Demo

我将内容移出div class="title_box"，并修改了css

<div class="title_box" id="resoruces">
    <div id="summary">Resources</div>
</div>

.title_box #summary { 
    background-color: white; 
    color: #2251a4;
    font-family: SegoeBold,Helvetica,Arial;
    font-size: 26px;
    line-height: 34px;
    margin: 0 0 10px 0;
    text-align: center;
}

如何获取标题框中的所有内容并将标题（资源）置于中心位置

2 个答案: