Question

我正在尝试将此框中的小部分背景设置为白色
在图像中，在横向规则之上，它表示＆＃34;测试项目＆＃34;，并且它后面有一点白色背景。我想让背景看起来像这样......

这是我的php文件。

<div class="containerwhite">
    <div id="container" class="container">
        <?php 
        $sql = "SELECT id, name, description, imgpath, price, sold FROM traceylynn";
        $result = $db->query($sql);
        $num = 0;
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo '<div id="item">';
                    echo '<div class="name">';
                        echo '<p>' .$row["name"].' </p>';
                    echo '</div>';
                    echo '<hr class="namehr">';

                    echo '<div class="price">';
                        echo '<p> $'.$row["price"].'</p>';
                        echo '<hr class="pricehr">';
                    echo '</div>';

                    echo '<div class="image">';
                        echo '<img alt="Cannot load image" src="'.$row["imgpath"].'"/>';
                    echo '</div>';

                    echo '<div class="button">';
                        if($row["sold"]==0){
                            echo '<button type="button" class="btn btn-success btn-lg" data-toggle="modal"
                                data-target="#'.$row["id"].'"> More Info </button>';
                        }else{
                            echo '<button type="button" class="btn btn-success btn-lg disabled"> Sold! </button>';
                        }
                    echo '</div>';
                echo '</div>';
            }
        }
        ?>
    </div>
    </div>

CSS

@font-face {
  font-family: "BlendaScript";
  src: url('../fonts/BlendaScript1.otf') format("opentype");
  src: url('../fonts/BlendaScript2.woff') format("woff"), url('../fonts/BlendaScript3.ttf') format("TrueType"), url('../fonts/BlendaScript4.woff2') format("woff2");
}

@font-face {
  font-family: Sugar;
  src: url('../fonts/Sugar.ttf' format("truetype"));
}

body {
  background-color: #EFC6D3;
}

.containerwhite {
  background-color: white;
  width: 100%;
  height: auto;
  margin-top: -15px;
}

.container {
  margin-bottom: 20px !important;
}

.traceylynnheader {
  padding-top: 20px;
  font-size: 30px;
  font-family: BlendaScript;
  text-align: center;
  color: #3D3028;
}

.traceylynnheader hr {
  margin-top: -15px;
  width: 80%;
  border: none;
  height: 1px;
  color: #333;
  /* old IE */
  background-color: #333;
  /* Modern Browsers */
}

#item {
  border: 1px solid black;
  padding-right: 30px;
  padding-left: 30px;
  margin-top: 50px;
  margin-right: 20px;
  width: 350px;
  height: 400px;
  float: left;
  background-color: #d0e0aa;
  margin-bottom: 20px;
}

#item>.name {
  text-align: center;
  color: black;
  font-family: Sugar;
  font-size: 20px;
  padding-top: 10px;
  color: #3D3028;
  background-color: white;
}

#item>.name>.namewhite {
  background-color: white;
}

#item>.namehr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid #3D3028;
  margin: 1em 0;
  padding: 0;
}

#item>.price {
  text-align: center;
  color: green !important;
  font-family: Sugar;
  font-size: 20px;
}

#item>.price>.pricehr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid #3D3028;
  margin: 1em 0;
  padding: 0;
}

.image {
  width: 100%;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

.image img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

.button {
  text-align: center;
  padding: 25px;
}

Answer 1

这是因为您在padding-left div中使用了padding-right 30px #item，显然您希望#item中的左右空格1}} div ...

...为了使#item > .name全宽，你必须在.name中使用负边距（与父填充相同的值）

#item > .name{
  margin-left:-30px;
  margin-right:-30px;
}

此外，您似乎正在运行包含#item作为id的项目循环，这意味着您在单个页面中将有多个id具有相同的名称，这不是一个好的练习...改为使用class

将box div背景设置为全白？

1 个答案: