dongtuo7364 2015-03-03 18:26
浏览 36

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

I am having this issue when going through a php loop where not all of my test is being aligned to the right of an image. Currently my app is utilizing phpexcel and reading off of a sales order spreadsheet where it displays an image for that product, the product id, size, and quantity. I have found that if there is more than one specified quantity it is not being aligned. See example photo: http://i.stack.imgur.com/QeRuC.png My php loop is the following:

   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>";

I have tried adding more div tags and moving things outside of the forloop but I cannot seem to figure it out. Also just in case, here is the css file:

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;
}

Do you guys have any idea of what I am missing?

  • 写回答

1条回答 默认 最新

  • douqianrou9079 2015-03-03 18:55
    关注

    The HTML/CSS you need could look as follows.

    Wrap the description and quantity text lines in a separate container and use overflow: auto to establish block formatting contexts to keep the text blocks from wrapping around the floated image.

    You will need to port this to you PHP script, but this solves the CSS issue.

    In your original code, I think that you were clearing your floats prematurely so they were wrapping around the image in an unexpected manner.

    .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>

    </div>
    评论

报告相同问题？

悬赏问题

  • ¥20 access多表提取相同字段数据并合并
  • ¥20 基于MSP430f5529的MPU6050驱动，求出欧拉角
  • ¥20 Java-Oj-桌布的计算
  • ¥15 powerbuilder中的datawindow数据整合到新的DataWindow
  • ¥20 有人知道这种图怎么画吗？
  • ¥15 pyqt6如何引用qrc文件加载里面的的资源
  • ¥15 安卓JNI项目使用lua上的问题
  • ¥20 RL+GNN解决人员排班问题时梯度消失
  • ¥60 要数控稳压电源测试数据
  • ¥15 能帮我写下这个编程吗