相关疑难解决方法(0)

我目前正在开发一个网站,遇到了CSS的问题.

我有一个div包含2个或更多孩子的父母:一个包含位于其他孩子之上的用户名,一个或多个并排div显示用户拥有的项目.

目前它工作正常,但如果用户的名字(顶部div)大于div下面s 的总宽度,它将扩展父级div.

我想只允许底部divs扩展父级div,并使标题div使用完整父级div的宽度而不能使其变大.

我创造了一个关于它的小提琴:http://jsfiddle.net/mLxjL/2/

HTML:

<div class="matches">
    <div class="match-container">
        <div class="user-match-container">
            <div class="match-owner user">You</div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container" src="img-path">
                    <div class="thumbnail-count">2</div>
                </div>
                <div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
            </div>
        </div> <span class="arrow">?</span> 
        <div class="user-match-container">
            <div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
            <div style="clear:both;"></div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container" src="img-path">
                    <div class="thumbnail-count">2</div>
                </div>
                <div …

如何防止div扩展？我希望div元素不占用100%的可用空间,并且具有它的孩子所具有的宽度.我需要这个水平居中父div.诀窍是子元素应该共享float:left或diplay:inline-block和fluid width,因此可以有很少行的子元素.

我无法将每一行包装在自己的div中,因为它会破坏响应式设计.

http://jsfiddle.net/ETkkR/

<div id="Blog1">
    <div class="post">
    <img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/>
        <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>
    <div class="post">
    <img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/>
                <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>        
</div>?

在某些情况下(宽度大于div.post-info内容的图像)div.post-info符合div.post父级,但有时div.post-info的宽度更大,对父div有影响.通过调整大小来发布.如何使div.post-info适合div.parent的宽度,如果它更大则不调整大小.

我的css

#Blog1{
    padding:10px;
}
#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.post img{
    height:100px;
}
.post .post-info{
    text-align:left;
}
.post .post-info span{
    word-wrap:break-word;
}? …

我有一个高度大于它的容器的图像。图像设置为 max-height: 100% 和 max-width: 100% 但它继续增长超出它的包含元素（高度 - 令人惊讶的是不是宽度）

如何在保持纵横比的同时防止它扩展到容器之外？

http://codepen.io/navarr/pen/zxZjjP提供了一个示例，该示例中的代码如下：

HTML：

.row {
  display: flex;
  .col {
    display: block;
    border: 1px solid blue;
    width: 50px;
    height: 400px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    .link {
      flex: 1 1 auto;
      img {
        max-height: 100%;
        max-width: 100%;
      }
    }
    h3 {
      flex: 0 0 auto;
      background: green;
    }
  }
}

<div class="row">
  <div class="col">
    <div class="link">
      <img src="http://i.imgur.com/qG6NmU7.png" />
    </div>
    <h3>100 x 800 image</h3>
  </div>
  <div class="col"> …