【问题标题】：How do I use a background image with floated divs如何使用带有浮动 div 的背景图像
【发布时间】：2014-10-25 11:47:12
【问题描述】：

如何将 div 彼此相邻放置？我用“float：left”尝试过它并且它有效但是当我想给容器div（其他div在里面）一个背景（图像或颜色）时，它不会显示，因为内部div然后放在外面容器分区。你知道如何解决这个问题吗？我不能用“margin”放置内部 div，因为内部 div 的数量可以改变（javascript、角度）并且它们的大小是未知的。

这是我的 html 代码：

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>ToDo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body >
    <div ng-controller="Tasks as tasksCtrl" class="background" ng-click="close()">
        <div class="add">
            <img src="pin4.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 22px; padding-right: 22px; padding-bottom:20px;">
                <a href ng-click="setEdit()">add</a>
            </div>
        </div>
        <div class="add" ng-show="edit" style="padding: 20px">
            <form name="form" novalidate>
                <div class="task">
                    Task hinzuf&uuml;gen
                </div>
                <input type="text" maxlength="25" ng-model="title" style="height:15px; max-width:541px; width:541px; margin-top:10px; font-size: 10px; padding-left: 10px;" placeholder="Titel" required></br>
                <textarea ng-model="body" style="height: 50px; max-width:541px; width:541px; margin-top:5px; font-size: 10px; padding-left: 10px;" placeholder="Bitte hier Text eingeben" required></textarea></br>
                <div style="width: 580px; margin-top:10px" align ="justify">Datum: <input type="date" ng-model="date" style="height:13px; width:125px;" required><span style="padding-left:20%">Uhrzeit: </span><input type="time" ng-model="time" style="height:13px; width:65px" required>
                    <select name="Group" size="1" ng-model="group">
                        <option ng-repeat="group in groups">{{group.name}}</option>
                    </select>
                    <button style="padding:4px; margin-left:150.5px" ng-click="tasksCtrl.addTask(title, body, group, date)" ng-disabled="form.$invalid">Hinzuf&uuml;gen</button>
                </div>
            </form>
        </div>
        <div class="add">
            <img src="pin3.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 20px; padding-right: 20px; padding-bottom:20px;">date</div>
        </div>
         <div class="add">
            <img src="pin.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 20px; padding-right: 20px; padding-bottom:20px;">priority</div>
        </div>
        <div class="add">
            <img src="pin2.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 20px; padding-right: 20px; padding-bottom:20px;"><a href ng-click="sortBy = 'group'; reverse = !reverse">groups</a></div>
        </div>
        <div class="add">
            <img src="pin4.png" width="30px" height="30px" align="right" style="margin-right: 40%; margin-top: -10px; margin-bottom: 10px;" hspace="10px">
            <div style="padding-left: 20px; padding-right: 20px; padding-bottom:20px;">calendar</div>
        </div>

        <div class="ng-class: task.classe" ng-repeat="task in tasks | orderBy:sortBy:reverse" ng-dblclick="setEditId($index)">
            <img ng-src="{{task.group.image}}" width="30px" height="30px" align="right" style="margin-right: 30%">
            <div style="padding: 20px">{{task.title}}</br>{{task.body}} {{task.dueDate}}</div>
        </div>
        <div class="add" style="padding: 20px; font-size: 22px" ng-show="specedit">
            <form name="form" novalidate>
                <div class="task">
                    Task hinzuf&uuml;gen
                </div>
                <table>
                    <tr>
                        <td><input type="text" maxlength="25" ng-model="title" style="height:20px; max-width:458px; width:458px; margin-top:10px; font-size: 12px; padding-left:10px;" placeholder="Titel" required></td>
                        <td width="400px" style="vertical-align: bottom;"><span style="padding-left: 30px">Steps</span><div class="addsteps"><a href="" ng-click="tasksCtrl.addStep(title, body)" style="text-decoration:none; color: black">+</a></div></td>
                    </tr>
                    <tr>
                        <td><textarea ng-model="body" style="height: 160px; max-width:450px; width:450px; margin-top:1px; font-size: 12px; padding: 10px;" placeholder="Bitte hier Text eingeben" required></textarea></td>
                        <td width="400px" style="font-weight: normal;">
                            <div style="height: 176px; overflow: auto; border: 2px solid; margin-top: 2px; margin-left: 10px">
                                <ul ng-repeat="step in tasks[id].steps" style="margin-top:10px; margin-left:-5px">
                                    <li class="ng-class: step.status"> {{step.title}} </br> {{step.body}} </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>
                </br>
                <div style="width: 580px; margin-top:10px" align ="justify">Datum: <input type="date" ng-model="date" style="height:13px; width:125px;" required><span style="padding-left:20%">Uhrzeit: </span><input type="time" ng-model="time" style="height:13px; width:65px" required>
                    <select name="Group" size="1" ng-model="group" style="padding-left:20%">
                        <option ng-repeat="group in groups">{{group.name}}</option>
                    </select>
                    <button style="padding:4px; margin-left:150.5px" ng-click="tasksCtrl.addTask(title, body, group, date)" ng-disabled="form.$invalid">Hinzuf&uuml;gen</button>
                </div>
            </form>
        </div>
    </div>


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script> -->
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

这是我的 css 代码：

.background {
   background: url(wall.jpg);
}

.add {
   font-family: "KG You Wont Bring Me Down";
   font-weight: bold;
   font-size: 35px;
   line-height: 30px;
   background-color: #FEEC91;
   margin:20px 10px 30px 10px;
   float: right;
   background: -moz-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -webkit-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -o-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -ms-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   -webkit-transform: rotate(0deg);  chrome & safari
   -moz-transform: rotate(0deg); /* firefox */
   -o-transform: rotate(0deg); /* opera */
   transform: rotate(0deg);
   -webkit-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -moz-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -o-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
}

.note1 {
   font-family: "KG You Wont Bring Me Down";
   font-size: 18px;
   background: #FEEC91;
   margin-top: 20px;
   margin-left: 18px;
   float: left;
   background: -moz-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -webkit-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -o-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -ms-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   width: 350px;
   -webkit-transform: rotate(-3deg); /* chrome & safari*/
   -moz-transform: rotate(-3deg); /* firefox */
   -o-transform: rotate(-3deg); /* opera */
   transform: rotate(-3deg);
   -webkit-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -moz-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -o-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
}

.note2 {
   font-family: "KG You Wont Bring Me Down";
   font-size: 18px;
   background: #FEEC91;
   margin-top: 20px;
   margin-left: 40px;
   float: left;
   background: -moz-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -webkit-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -o-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -ms-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   width: 340px;
   -webkit-transform: rotate(1.5deg); /* chrome & safari*/
   -moz-transform: rotate(1.5deg); /* firefox */
   -o-transform: rotate(1.5deg); /* opera */
   transform: rotate(1.5deg);
   -webkit-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -moz-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -o-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
}

.note3 {
   font-family: "KG You Wont Bring Me Down";
   font-size: 18px;
   background: #FEEC91;
   margin-top: 10px;
   margin-left: 10px;
   float: left;
   background: -moz-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -webkit-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -o-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   background: -ms-linear-gradient(280deg, #FEEC91 30%, #FCF0B1, #FEEC91) ;
   width: 330px;
   -webkit-transform: rotate(-0.5deg); /* chrome & safari*/
   -moz-transform: rotate(-0.5deg); /* firefox */
   -o-transform: rotate(-0.5deg); /* opera */
   transform: rotate(-0.5deg);
   -webkit-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -moz-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   -o-box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
   box-shadow: 8px 9px 15px 0px rgba(0,0,0,0.23);
}

好的，它很长... container-div 是具有类背景的那个...

【问题讨论】：

How do you keep parents of floated elements from collapsing?的可能重复
也可以看看：stackoverflow.com/questions/16568272/…
你知道如何将 div 放在一起。这不是你的问题。您的问题是“我如何使用带有浮动 div 的背景图像”，如果您问这个问题，那是因为您不了解盒子模型的工作原理，以及浮动与其他元素的渲染方式。
and if you're asking that question it's because you don't understand how the box model works, and how floats are rendered vs other elements. 那就教育他吧。
@Mardoxx - 这超出了所提问题的范围，而且话题太多，无法回答。

标签： html css css-position

【解决方案1】：

试试这个：

CSS

.background {
   background: url(wall.jpg);
   overflow: hidden;
}

【讨论】：

好的...谢谢它的工作原理:)。但还有另一个问题。当您单击“添加”时，公式会出现，但如果您单击它来填写表格，它会立即消失。那是因为背景是一个大按钮，当你点击它时，公式就会消失。但显然该按钮位于前景中（因此它位于公式上方。“z-index”没有帮助。有什么想法吗？
jsfiddle.net/1j6t4/bp6p17Lg 但角度不起作用......所以它看起来非常令人毛骨悚然，你无法真正理解我在结果中的意思

【解决方案2】：

你需要添加：

overflow:hidden;

到您的容器。这里有一个例子：http://jsfiddle.net/sch0waqw/

【讨论】：

ops... Faiz Ahmed 先回答。
FFS，你不需要降级我的答案。我在制作 jsfiddle 时在浏览器中打开了问题，没有注意到它已经被回答了
我没有降级你的答案...我什么也没做
不是说你。对不起。味精是为了任何喜欢在没有正当理由的情况下降级答案