Question

我遇到这个问题时，通过一个php循环，并不是我的所有测试都与图像的右侧对齐。目前，我的应用程序正在使用phpexcel并读取销售订单电子表格，其中显示该产品的图像，产品ID，尺寸和数量。我发现如果有多个指定数量，它就没有对齐。见示例照片： http://i.stack.imgur.com/QeRuC.png 我的php循环如下：

   echo "<html>
    <head>
     <link rel='stylesheet' type='text/css' href='mycss.css'>
     </head>
    <header>
    <h3>Run Date: " . $runDate . "
    PO# " . $poNumber . "
    Start: " . $startDate . " End: " . $endDate . "
    Total Piece Count: " . $totalQuantityCount . "</h3> 
    </header>
    <body>
    ";
    //this for loop generates the report
    $VendorSkus = array();
    for ($x = 13; $x <= $highestRow; $x++) {
        if ($sheetData[$x]["E"] != null) {
            if (!in_array($sheetData[$x]["J"], $VendorSkus)) {
                echo "
                </br/>
                <div class='content'>
                <img src='/images/" . $sheetData[$x]["J"] . ".jpg' alt='' height='262' width='262'>
                " . $sheetData[$x]["J"] . "<br/>";
                echo $sheetData[$x]["E"] . "</div>";
            }

            echo "
         <div class='container clearfix'>
        Size: " . $sheetData[$x]["M"] . "Qty: " . $sheetData[$x]["N"] . "
        </div>
        ";
            echo "
        ";
            $VendorSkus[] = $sheetData[$x]["J"];
        }
    }
    echo "
        </body>
        </html>";

我尝试添加更多div标签并在forloop之外移动东西，但我似乎无法弄明白。另外，以防万一，这里是css文件：

clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}


.content img {
    margin-right: 15px;
    float: left;
}

.res {
height:60px;
background-color:yellow;
border-bottom:1px solid black;
}
img, .text{
vertical-align:top;
}
.text{
display:inline-block;
}
p, h5{
margin:0;
  padding:0;
}

你知道我错过了什么吗？

Answer 1

您需要的HTML / CSS可能如下所示。

将描述和数量文本行换行到一个单独的容器中，并使用overflow: auto建立块格式化上下文，以防止文本块环绕浮动图像。

您需要将此端口移植到PHP脚本，但这解决了CSS问题。

在您的原始代码中，我认为您过早地清理了浮动内容，因此它们以意想不到的方式缠绕在图像上。

.panel {
  overflow: auto;
}
.panel img {
  float: left;
  margin-right: 20px;
}
.panel .desc {
  overflow: auto;
  border: 1px dotted blue;
}

<div class="panel">
  <img src="http://placehold.it/200x100">
  <div class="desc">
    <p>Description text...</p>
    <p> Size: 1 Qty: 1</p>
    <p> Size: 2 Qty: 2</p>
    <p> Size: 3 Qty: 3</p>
    <p> Size: 4 Qty: 4</p>
    </div>
  </div>

CSS：并非所有文本都与图像对齐

1 个答案: