css - 如何将此 div 对齐到父 div 的右下角/左下角？

Question

所以，我一直在尝试将

放到

的底部。在代码中，您可以看到我尝试使用相对位置和 bottom :0 来执行此操作，但它什么也没做。我可以向右浮动，所以我只需要将它放到底部即可。现在它只是一直放在文本的正下方。

echo "<div class=\"product\">";
    echo "<div class=\"left\">";
        echo "<div style=\"width:225px;height:180px;background:#ccc\">" . $obj->product_img_name . "</div>";
    echo "</div>";

    echo "<div class=\"right\">";
        echo "<form method='post' action='update.php'>"; 
            echo "<h3>" . $obj->product_name . "</h3>";
            echo "<p>" . $obj->product_desc . "</p>";
            echo '<input type="hidden" name="action" value="add" />';
            echo "<input type=\"hidden\" name=\"id\" value=\" $obj->id \" />";
                    echo "<div id=\"action\" style=\"position:relative;bottom:0;float:right;\">";
                         echo $obj->price;
                         echo <input type=\"text\" name=\"quantity\" />";
                         echo "<input type='submit' value ='Add To Cart'>";
                    echo "</div>";
         echo "</form>";
    echo "</div>";

我认为它不能，因为 div 在表单中，但我试图在表单下方放置一个 div 并查看 relative 是否有效，但它仍然无效。

CSS:

.wrapper{
    width:824px;
    padding:10px 20px;
    margin:0 auto;
    background:#eeeeee;
}
.right{
    height:200px;
    width:550px;
    float:right;
}
.right p{
    font-size:0.95em;
}
.left{
    width:250px;
    float:left;
    padding:20px 0 0;
}
.product{
    height:200px;
    margin-bottom:50px;
}

最佳答案

如果.action可以绝对定位...

.right {
  position: relative;
  /* other code */
}
.action {
  position: absolute;
  right: 0;
  bottom: 0;
  /* other code */
}

关于css - 如何将此 div 对齐到父 div 的右下角/左下角？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23352179/

上一篇：php - 相对超链接失败

下一篇：javascript图像裁剪/调整大小

Answer 1

如果.action可以绝对定位...

.right {
  position: relative;
  /* other code */
}
.action {
  position: absolute;
  right: 0;
  bottom: 0;
  /* other code */
}