Question

出于某种原因，这个页面上的后续面板变得像金字塔一样大，即使它们是相同的。我希望它们具有相同的宽度，即使它们由于文本量而必须是不同的高度。我正在使用Foundation 4。

PHP

$pt1="1.  This is a test";
$pt2="2.  This is a test";
$pt3="3.  This is a test";
$pt4="4.  This is a test";

HTML

<div class="row"><div class="small-3 small-centered columns"><h3 id="makemebold" class="subheader">This is how it works:</h3></div></div>

  <div class="row"><div class="small-6 small-centered columns"><div class="panel" ><h5><? echo $pt1 ?></h5></div></div>
  <div class="row"><div class="small-6 small-centered columns"><div class="panel" ><h5><? echo $pt2 ?></h5></div></div>
  <div class="row"><div class="small-6 small-centered columns"><div class="panel" ><h5><? echo $pt3 ?></h5></div></div>
  <div class="row"><div class="small-6 small-centered columns"><div class="panel" ><h5><? echo $pt4 ?></h5></div></div>

Answer 1

它将每个面板的宽度设置为.row类的百分比。在这种情况下，您可以删除.row包装器，因为面板已经包含在div中：http://jsfiddle.net/At8jz/1/

<div class="row">
    <div class="small-3 small-centered columns">
        <h3 id="makemebold" class="subheader">This is how it works:</h3>
    </div>

    <div class="small-6 small-centered columns">
        <div class="panel">
            <h5>This is a test</h5>
        </div>
    </div>

    ... other panels ...

</div>

基础面板风格问题

1 个答案: