Question

我已经开始使用CSS了解这个小提琴：

.cont {
    border:1px solid #F36F25;
}
.ticketnumber {
    display:inline-block;
}
.status {
    display:inline-block;
}
.summary {
    display:inline-block;
    float:left;
}
.last_updated {
    display:inline-block;
    float:right;
}
.box {

}

http://jsfiddle.net/3qbn222u/

我想创建一个看起来像这个图像的东西：

我怎样才能以最简单的方式实现这一目标？

Answer 1

// HTML BLOCK

<div class="cont">
    <div class="header_box">
        <div class="ticket_box">
            <div class="ticketnumber">ID#0000001234</div>
            <div class="summary">Subject: Grumpy Cat</div>
            <div class="summary">Summary: blaahh</div>
        </div>
        <div class="summary_box">
            <div class="last_updated">10 minutes ago</div>
            <div class="status"></div>
        </div>
    </div>
    <div class="wrapper_box">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
     </div>
</div>

// CSS BLOCK

.cont {
    display: flex;
    display: -webkit-flex;  
    height: 200px;
    border-radius: 5px;
    flex-direction: column;
    -webkit-flex-direction: column;
    border: 1px solid #dddddd;
    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.header_box{
    display: flex;
    display: -webkit-flex;  
    flex: 1;
    -webkit-flex: 1;
    font-size: 12px;
}
.wrapper_box{
    display: flex;
    display: -webkit-flex;  
    flex: 2;
    -webkit-flex: 2;
}
.ticket_box{
    display: flex;
    display: -webkit-flex;
    flex: 6;
    -webkit-flex: 6;
     flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: flex-start;
    -webkit-align-items: flex-start;
     margin: 10px 10px;
}
.summary_box{
    display: flex;
    display: -webkit-flex;
    flex: 4;
    -webkit-flex: 4;   
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: flex-end;
    -webkit-align-items: flex-end;
     margin: 10px 10px;
}
.ticketnumber {
    display: flex;
    display: -webkit-flex;
}
.summary {
    display: flex;
    display: -webkit-flex;
}
.last_updated {
    display: flex;
    display: -webkit-flex;   
}
.status {
    display: flex;
    display: -webkit-flex;

    height: 15px;
    width: 15px;

    margin: 10px 0px; 

    border-radius: 50%;
    background: red;
}
.box {
    display: flex;
    display: -webkit-flex;
    flex: 1;
    -webkit-flex: 1;   
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    border: 10px solid #f3f3f3;
    margin: 5px 5px; 
    background: #ccc;
    background: url(http://www.freeallimages.com/wp-content/uploads/2014/09/grumpy-cat-no-1.jpg) no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
    -webkit-background-position: center;
    color: #fff;
}

Answer 2

同意使用FlexBox是最简单的方法。

这是FlexBox的一个很好的参考指南：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

使用CSS创建彼此内部显示的div并内联

2 个答案: