簡體   English   中英

div內部的div未按預期對齊

[英]Div inside div not aligning as expected

您可以在這里訪問我正在嘗試的站點。

我試圖基本上獲得右下角框中右上角的布局,但是由於某種原因,我無法使其浮動到右側。 我在這里缺少什么嗎? 這讓我發瘋了,因為我的代碼在上面的框中起作用,而在下面的框中不起作用。

這是HTML。

<div id="menu-ad">
        <div>
            <p class="titles">Our Fare</p>
            <p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
            <a href="#" id="button">VIEW MENU</a>
        </div>
    </div><!--end menu ad-->

    <div id="hours">
        <div>
        </div>
    </div><!--end hours-->
</div><!--end container-->

還有CSS。

/*menu ad*/

div#menu-ad {
    position: relative;
    margin-right: -11px;
    margin-top: -11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10px;
    border-left: 2px solid #b9aea3;
    border-bottom: 2px solid #b9aea3;
    overflow: hidden;
}

div#menu-ad div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    height: 200px;
    display: inline-block;
}

.titles {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 2.5rem;
    color: #d6832e;
}

#ad {
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 1.6rem;
    line-height: 1.35;
    color: #4f4d4b;
    margin-top: .5rem;
    width: auto;
}

a#button {
    padding: .6rem 1.3rem .6rem 1.3rem;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 1.8rem;
    color: #fff;
    background: #d6832e;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    position: absolute;
    float: left;
    bottom: 3.5rem;
}

/*hours*/

div#hours {
    position: relative;
    margin-right: -11px;
    margin-top: 11px;
    width: 268px;
    height: auto;
    float: right;
    padding: 11px 11px 10px 10p;
    border-left: 2px solid #b9aea3;
}

div#hours div {
    background: #f9f4df;
    padding: 1.9rem 4rem 2.5rem 2.5rem;
    height: 150px;
    display: inline-block;
}

謝謝你的幫助! 這可能很簡單,我只需要一雙新鮮的眼睛。

您似乎有錯字,

根據樣式規則

div#hours

你有

padding: 11px 11px 10px 10p;

您最后缺少一個“ x”。 這意味着未應用填充規則

現在這解決了對齊問題,但是高度可能不是現在,但是我敢肯定應該是直截了當的

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM