Question

因此，我有一个和div，这是一个结果卡，一个div具有结果正文/页脚。我希望页脚停留在底部的行中，并在结果的顶部显示图片，但是我希望它周围的矩形框的结果标题div文本对齐到左侧。我在实现此目标时遇到了一些麻烦。我想知道如何在居中居中同时将结果页脚也保持在卡的底部的同时保持文本向左对齐。

``

<section id="restaurant-results">


<div class="result_card">
    <div class="result_header">
        <h2 class="result_title">${title}</h2>
        <h3 class="result_location result_neighborhood">${neighborhood}</h3>
        <h3 class="result_location result_address">${address}</h3>
        <p class="result_price">${price}</p>
        <!--<p>${cuisine type}</p>-->
    </div>

    <div class="result_body">
        <img src="restaurant_photo" class="result_thumbnail" alt="">
    </div>
    <div class="result_footer">
        <button class="result_footer_button">Call</button>
        <button class="result_footer_button"><a href="" target="_blank" class="result_website">Visit website</a></button>
        <button class="result_footer_button">Make reservation</button>
    </div>
</div>

</section> 

``

Answer 1

您可以像这样在该类中设置样式

.result_header{
text-align: left
}

或者您可以像这样设置内联样式

<div class="result_header" style="text-align:left">

对于结果卡，请执行此操作

.result_card{
 margin: 0 auto;   
 text-align:center;
 display:inline-block;
}

在结果标题css之前添加结果卡css

布局冲突问题

1 个答案: