相关疑难解决方法(0)

我已经搜索了其他问题,虽然这个问题看起来和其他几个问题类似,但到目前为止我看到的任何内容似乎都没有解决我遇到的问题.

我有一个包含许多其他div的div,每个div都向左浮动.这些div每个都包含一张照片和一个标题.我想要的只是让照片组在包含div中居中.

正如你可以从下面的代码中看到的,我已经使用这两种尝试overflow:hidden与margin:x auto父div的,并且我还添加了clear:both照片后(如在其他主题的建议).似乎没有什么区别.

谢谢.我很感激任何建议.

<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
    <h4>Section Header</h4>

    <div style="margin: 2em auto;">

        <div style="float: left; margin: auto 1.5em;">
            <img src="photo1.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo2.jpg" /><br />
             Photo Caption
        </div>
        <div style="float: left; margin: auto 1.5em;">
            <img src="photo3.jpg" /><br />
             Photo Caption
        </div>

        <div style="clear: both; height: 0; overflow: hidden;"> </div>

    </div>

</div>

我有一个固定宽度的容器,其中几个可变宽度元素必须出现在一行中,必要时可以将其溢出到其他行中.

但是,每个元素的开头必须与它上面的元素对齐,所以在ASCII艺术中它看起来像是这样(比如,填充1):

    /----------------------------------\
    |                                  |
    | # One    # Two   # Three  # Four |
    | # Five   # Six                   |
    |                                  |
    \----------------------------------/

换一种说法:

• 每行的第一个元素必须左对齐
• 每行的最后一个元素(最后一行除外)必须是右对齐的
• 每个元素必须与其上方的元素左对齐

我试图使用flexbox而没有成功.

这是我到目前为止最好的,flex-wrap: wrap用于容器和flex-grow: 1元素.

问题是最后一行填充到边缘.

justify-content: flex-start; // this does nothing

如果我拿走flow-grow: 1那么元素不会平均分配.我也尝试摆弄last-of-type元素,但这还不够.

这是否可能flexbox,或者我是以错误的方式进行的？

我知道之前已经问过类似的问题,但是我没有看到父div具有未知宽度且具有明确答案的问题.

所以情况就是这样.

<style>
.parent {
   width: 100%;
}

.child {
  width: 300px;
  float: left;
}

</style>

<div class="parent>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  <div class="child></div>
  ...
  <div class="child></div>
<div>

基本上,我希望在父容器中容纳尽可能多的子div,因为用户的屏幕分辨率可以支持.

我不想使用css3媒体查询,因为我想支持IE7.

我尝试使用javascript为父级指定宽度,但由于内容在加载后跳转到中心,因此不太理想.有任何想法吗？