7

この質問は 100 万回回答されているようで、100 万回も機能しているようです。私のためではありませんが。すべてのdivをまとめたい

<body>
    <div class="mainprogress">
        <div class="detailprogress" style="height:100%;width:18%">
            <div class="done" style="width:58%"></div>
            <div class="late" style="width:41%"></div>
        </div>
        <div class="detailprogress" style="height:35%;width:81%">
            <div class="done" style="width:73%"></div>
            <div class="todo" style="width:26%"></div>
        </div>
    </div>
</body>

このために、次のCSSを使用しています

.mainprogress {
    height:60px;
    border:2px solid black;
}
.mainprogress div{
    padding:0;
    margin:0;
    display:inline-block;
}
.detailprogress div {
    height:100%;
}
.detailprogress .done {
    background-color:lightgreen;
}
.detailprogress .donelate {
    background-color:lightpink;
}
.detailprogress .late {
    background-color:red;
}
.detailprogress .todo {
    background-color:green
}

（ここでフィドル：http://jsfiddle.net/uhBW2/5/）負のマージンを十分にいじると、ある時点で機能し始めるように見えますが、ひどくハックに感じます。要素を互いに整列させるにはどうすればよいですか?

4

4 に答える 4

2

div を「display: inline-block」に設定したため、スペースが作成されます。

ここで修正方法をお読みください：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-08-19T13:54:09.690 に答える
2

インラインブロックの代わりにフロートを使用してみてください。より広いサポートがあり、実際に機能します。

http://jsfiddle.net/uhBW2/7/

.mainprogress {
    height:60px;
    border:2px solid black;
    overflow: hidden;
}
.mainprogress div{
    padding:0;
    margin:0;
    float: left;
}
于 2013-08-19T13:54:34.250 に答える
1

float:left以下のように、一緒にプッシュする必要があるすべての要素に追加する必要があります。

.mainprogress {
    height:60px;
    border:2px solid black;
}
.mainprogress div{
    padding:0;
    margin:0;
    display:inline-block;
    float:left;
}
.detailprogress div {
    height:100%;
    float:left;
}
.detailprogress .done {
    background-color:lightgreen;
    float:left;

}
.detailprogress .donelate {
    background-color:lightpink;
    float:left;
}
.detailprogress .late {
    background-color:red;
    float:left;
}
.detailprogress .todo {
    background-color:green
        float:left;
}
于 2013-08-19T13:55:56.957 に答える