如何使div成為容器的寬度？

Question

我一直在尋找解決方案，但似乎找不到一個相關的解決方案。 我基本上希望div底部帶有黃色圓圈的文本為容器的整個寬度（紅色為參考）

另外，底部的div似乎不在頁面中心，為什么會這樣呢？

HTML

<body>



    <header>
        <div class="container">
            <nav>
                <ul>
                    <li id="main_link"><a href="#">Website</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>


    <div class="showcase">
        <div class="container">

            <div class="showcase_overtext">
                <h1>A beautiful website</h1>
                <p>I did ma best</p>

            <div class="button">
                    <button>READ MORE</button>
                </div>
            </div>

            <div class="floating_section">
                <h1>FEATURED</h1>
            </div>

        </div>
    </div>

CSS：

/*Universal*/

body {
    margin:0;
    padding:0;
}

.container {
    text-align:center;
    margin:auto;
    width:80%;
    background:red;
}

/*Header*/

header {
    background-color:rgba(0,0,0,0.3);
    font-family:'Montserrat',sans-serif;
    padding:10px;
}

header ul {
    margin:0;
}

header ul li {
    display:inline;
    padding:0 10px 0 15px;
}

header ul li a {
    color:#353535;
    font-weight:bold;
    text-decoration: none;
}

#main_link {
    padding-right:50px;
}

/*Showcase*/

.showcase {
    height:500px;
    background-image:url('Showcase.jpg');
    background-size:cover;
    position:relative;
}

.showcase_overtext {
    color:#353535;
    font-family:'Montserrat',sans-serif;
    font-size:25px;
    font-weight:bold;
    position:absolute;
    top:300px;
    right:50px;
}

.showcase_overtext h1, p {
    margin:5px;
}

.button {
    text-align:center;
}

.floating_section {
    position:absolute;
    bottom:10px;
    display:inline-block;
}

謝謝

Answer 1

中心你絕對定位 floating_section加left: 0和right: 0它-看看下面的演示：

 body { margin: 0; padding: 0; } .container { text-align: center; margin: auto; width: 80%; background: red; } header { background-color: rgba(0, 0, 0, 0.3); font-family: 'Montserrat', sans-serif; padding: 10px; } header ul { margin: 0; } header ul li { display: inline; padding: 0 10px 0 15px; } header ul li a { color: #353535; font-weight: bold; text-decoration: none; } #main_link { padding-right: 50px; } .showcase { height: 500px; background-image: url('https://via.placeholder.com/500'); background-size: cover; position: relative; } .showcase_overtext { color: #353535; font-family: 'Montserrat', sans-serif; font-size: 25px; font-weight: bold; position: absolute; top: 300px; right: 50px; } .showcase_overtext h1, p { margin: 5px; } .button { text-align: center; } .floating_section { position: absolute; bottom: 10px; display: inline-block; left: 0; /* added */ right: 0; /* added */ }

 <header> <div class="container"> <nav> <ul> <li id="main_link"><a href="#">Website</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </header> <div class="showcase"> <div class="container"> <div class="showcase_overtext"> <h1>A beautiful website</h1> <p>I did ma best</p> <div class="button"> <button>READ MORE</button> </div> </div> <div class="floating_section"> <h1>FEATURED</h1> </div> </div> </div>

Answer 2

您真的不想像以前那樣使用絕對元素。 絕對元素從頁面流中刪除，因此具有自己的大小。 刪除絕對位置可使站點更接近您的目標：

 body { margin: 0; padding: 0; } .container { text-align: center; margin: auto; width: 80%; background: red; } /*Header*/ header { background-color: rgba(0, 0, 0, 0.3); font-family: 'Montserrat', sans-serif; padding: 10px; } header ul { margin: 0; } header ul li { display: inline; padding: 0 10px 0 15px; } header ul li a { color: #353535; font-weight: bold; text-decoration: none; } #main_link { padding-right: 50px; } /*Showcase*/ .showcase { height: 500px; background-image: url('Showcase.jpg'); background-size: cover; position: relative; } .showcase_overtext { color: #353535; font-family: 'Montserrat', sans-serif; font-size: 25px; font-weight: bold; margin-top: 300px; right: 50px; } .showcase_overtext h1, p { margin: 5px; } .button { text-align: center; } .floating_section { display: inline-block; }

 <header> <div class="container"> <nav> <ul> <li id="main_link"><a href="#">Website</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </header> <div class="showcase"> <div class="container"> <div class="showcase_overtext"> <h1>A beautiful website</h1> <p>I did ma best</p> <div class="button"> <button>READ MORE</button> </div> </div> <div class="floating_section"> <h1>FEATURED</h1> </div> </div> </div>

如何使div成為容器的寬度？

問題描述

2 個解決方案

解決方案1
1 2019-03-30 15:40:44

解決方案2
1 已采納 2019-03-30 15:41:59

如何使div成為容器的寬度？

問題描述

2 個解決方案

解決方案1 1 2019-03-30 15:40:44

解決方案2 1 已采納 2019-03-30 15:41:59

解決方案1
1 2019-03-30 15:40:44

解決方案2
1 已采納 2019-03-30 15:41:59