CSS

Question

如何将divs彼此相邻？我用＆＃34; float：left＆＃34;并且它可以工作但是当我想给容器div（其他div在里面）一个背景（图像或颜色）时，这不会显示，因为内部div然后放在container-div之外。你知道如何解决这个问题吗？我无法将内部div与＆＃34; margin＆＃34;因为内部div的数量可以改变（javascript，angular）并且它们的大小是不知道的。

这是我的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);
}

好吧，这很长...容器-div是具有类背景的那个...

Answer 1

试试这个：

CSS

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

Answer 2

你需要添加：

overflow:hidden;

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

如何使用带浮动div的背景图像

2 个答案:

CSS