Question

如何让颜色div占据父div .starter的整个宽度，以便整个宽度为一种颜色？我已经尝试了一切，并且没有取得进展。为了便于收容，我已经将问题隔离开了。提前谢谢！

<!DOCTYPE html>
<html>
    <head>      
        <title>Pricing</title>
        <link href="styles2.css" rel="stylesheet" />
    </head>
    <body>
        </div>
            <ul id="plans">
                <li>
                    <div id='starter' class="col-4 col-m-12">
                        <h1>Starter</h1>
                        <div class="color"><h3 id="test">1 Hour</h3></div>
                        <p>$25</p>
                    </div>
                </li>
            </ul>
    </body>
</html>

CSS

* {
    box-sizing: border-box;

}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
} 
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
#header{
    padding:15px;
    background-color:rgb(157,221,220);
    margin-bottom:7px;
}

body{
    background-color:white;
    color:rgb(164,111,67);}
a{
    text-decoration:none;
    color:rgb(164,111,67);
}
#info{
    padding:0;
    text-align: center;
}
#pricing{

    padding:30px;
}
#starter, #basic, #deluxe{
    background-color:lightgray;
    text-align: center;
    border:5px solid white;
}
ul{
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
#test{
    background-color:white;
    width:100%;
}

#color{
    margin:0;
    background-color:white;
}
html, body{}

我希望它看起来像

Answer 1

你被父母的填充搞砸了。将其更改为：

[class*="col-"] {
  float: left;
  padding: 0;;
}

* {
    box-sizing: border-box;

}
.row::after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 0;
} 
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
#header{
    padding:15px;
    background-color:rgb(157,221,220);
    margin-bottom:7px;
}

body{
    background-color:white;
    color:rgb(164,111,67);}
a{
    text-decoration:none;
    color:rgb(164,111,67);
}
#info{
    padding:0;
    text-align: center;
}
#pricing{

    padding:30px;
}
#starter, #basic, #deluxe{
    background-color:lightgray;
    text-align: center;
    border:5px solid white;
}
ul{
    margin:0;
    padding:0;
}
li{
    list-style:none;
}
#test{
    background-color:white;
    width:100%;
}

#color{
    margin:0;
    background-color:white;
}
html, body{}

<!DOCTYPE html>
<html>
    <head>      
        <title>Pricing</title>
        <link href="styles2.css" rel="stylesheet" />
    </head>
    <body>
        </div>
            <ul id="plans">
                <li>
                    <div id='starter' class="col-4 col-m-12">
                        <h1>Starter</h1>
                        <div class="color"><h3 id="test">1 Hour</h3></div>
                        <p>$25</p>
                    </div>
                </li>
            </ul>
    </body>
</html>

Answer 2

您可以为父div添加额外的CSS属性：

#starter.col-4.col-m-12 {
  padding:0px;
}

JSFiddle

Answer 3

由于子div是父div的子项，因此您可以将其宽度设置为100％，这会将其设置为父宽度的100％。如果您知道父级的宽度，则可以将其宽度设置为相同的值。

＆＃13;

#parent {
  height: 300px;
  background-color: gray;
}
#child {
  width: 100%;
  height: 20px;
  background-color: white;
  position: absolute;
  top: 200px;
}

＆＃13;

<div id="parent">
  <div id="child">
    hello world
  </div>
</div>

＆＃13;

Answer 4

您可以尝试将ID添加到包含＆＃34; 1小时＆＃34;的div中。并为该

添加边距

   margin-right:25px;
   margin-left:25px;

检查出来： http://codepen.io/anon/pen/LbRoXK

Answer 5

添加：

#starter {
  padding-left: 0;
  padding-right: 0;
}

http://codepen.io/anon/pen/XNjwYB

如何使div占用父div的全宽

5 个答案: