Как я могу сделать div полной ширины? - PullRequest
Новая
       11

Как я могу сделать div полной ширины?

0 голосов
/ 06 декабря 2018

Даже после того, как тело не имеет места по бокам, мой div все еще не в центре.У меня есть div, занимающий всю ширину экрана, как мне нужно, но я не могу заставить его центрироваться.Я запустил его с помощью margin-left, но на других экранах это не сработалоКакие-либо предложения?

CSS 

div {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

section {
    margin: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;

}

.div-with-bg {
    background-image: url(../images/color1.jpg);
    background-repeat: no-repeat;
    background-color: grey;
    /*this is needed to keep image proportion good*/
    background-size: cover;
    position:relative;
    margin-left:0px;
    border-left:0px;
    padding-left:0px;
}

.div-no-sides {
    /*margin: 0px 0px 0px 0px;*/
    padding: 0px 0px 0px 0px;
    border: 0px 0px 0px 0px;
    /*margin-left: -5em;*/
}

HTML 

<section class="hero div-no-sides" style="width:100vw">
    <div class="container div-with-bg div-no-sides wide">
        <div class="col-md-12">
            <h1>
                Heading Goes Here
            </h1>

            <p class="tagline">
                Quick. Accurate. Reliable.
            </p>
            <a class="btn btn-full" href="#about">Get A Quote Today</a>
        </div>
    </div>
</section>

Ответы [ 3 ]

0 голосов
/ 06 декабря 2018

Итак, используя вашу HTML-структуру, вы можете использовать следующий CSS-код для центрирования текста: 

html,body{
  margin:0px;
  padding:0px;
}

.div-with-bg {
    background-image: url(../images/color1.jpg);
    background-repeat: no-repeat;
    background-color: grey;
    /*this is needed to keep image proportion good*/
    background-size: cover;
}

.container div {
text-align:center;
}

Технически, чтобы помочь ответить на ваш вопрос, всегда и всегда хочется быть на всю ширину.любого пространства, которое он занимает, независимо от того, ограничено ли оно по ширине родительским узлом или тегом body страницы.В частности, поскольку вы упомянули, что хотите, чтобы текст располагался по центру, вы должны включить это в низкоуровневое объявление div div.

0 голосов
/ 06 декабря 2018

Я переместил свой код со своей страницы индекса на свою страницу макета, а затем он начал работать как положено.Я считаю, что наличие @Renderbody на странице макета, которая отображалась на странице индекса, и стало причиной моей проблемы.

0 голосов
/ 06 декабря 2018

HTML 

<div class="container">

    <div class="row" style="height:100px; background: #fff;"> this is ok</div>
    <div class="row row-full" style="height:100px; background: #f00;">
        this should take 100% width
    </div>
</div>

CSS 

.container{
 background: gray;
 min-height: 400px;
}

/*Can achive using vw css unit*/
.row-full{
      width: 100vw;
      position: relative;
      margin-left: -50vw;
      height: 100px;
      margin-top: 100px;
      left: 50%;
}
...