Question

我希望黄色div总是以蓝色div为中心（占据其内部文本的空间），然后让紫色div浮动到黄色div中，所以它基本上是对齐的到黄色的div。

我认为这可以通过CSS和灵活布局来实现，但我还没有把它钉死

这是基本的小提琴http://jsfiddle.net/AFzpp/ 以下是我希望http://www.screencast.com/t/RFw7xMPy8

的结果

<div id="body">
    <div id="column">
        <div id="chicken">fun</div>
        <div id="text"><p>test</p></div>
    </div>
</div>

Answer 1

你可以很简单地做到这一点。

只需删除#text的宽度属性，然后将text-align:center;添加到#column。

http://jsfiddle.net/TannerJohnson/ypnrA/

Answer 2

http://jsfiddle.net/AFzpp/2/

    text-align :center;

使div黄色和蓝色中心。并使用

 display:inline-block

使您的div适合文字内容

Answer 3

您可以使用inline-block显示，text-align将容器置于中心位置，并将负margin添加到您想要放在旁边的容器中。负边距几乎减少了所需的宽度或空间。示例：http://codepen.io/gc-nomade/pen/qeCGh （这是http://codepen.io/gc-nomade/details/wqbjl）的分支

<div>
  <div>
  </div>
  <div>
  </div>
</div>

div {
  width:80%;
  min-width:750px;
  margin:auto;
  background-color:green;
  background-image:linear-gradient(to left, rgba(0,0,0,0.2) 50%, rgba(255,255,255,0.2) 50%);/* this to show where middle stands */
}
div div  {
  display:inline-block;
  min-width:1%;/* reset */
  vertical-align:top;
  width:30%;
  min-height:200px;/* cause example has no content */
  padding:5px;
  background:#0871B2;
  margin:  1%;
  font-size:14px;
  font-size:1.6vw;
  text-align:left;
  color:white;
  text-shadow:0 0 1px black;
  font-weight:bold;
}
div {
  text-align:center;
}
div div:first-of-type {
  margin-left:-11%;/* reduce virtually width or horizontal space needed close to zero */
  width:10%;
  min-height:50px;/* reset */
  background:purple;
}
div div:first-of-type:before {
  content:'on left middle side';
}

浮动Div对抗始终居中的Div？

3 个答案: