Как сделать div ширину контейнера? - PullRequest
Новая
       27

Как сделать div ширину контейнера?

1 голос
/ 30 марта 2019

Я искал решение для этого, но, похоже, не нашел подходящего.Я в основном хочу, чтобы div внизу с текстом внутри (обведено желтым) был полной шириной контейнера (для справки выделен красным)

Кроме того, div внизу не кажется центромстраница, почему это так?

enter image description here

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

Спасибо

Ответы [ 2 ]

1 голос
/ 30 марта 2019

Вы действительно не хотите использовать абсолютные элементы, как у вас.Абсолютные элементы удаляются из потока страницы и, таким образом, принимают свой собственный размер.Удаление абсолютного позиционирования делает сайт намного ближе к вашей цели: 

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>
1 голос
/ 30 марта 2019

Вы центрируете абсолютно позиционированный 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>
...