Question

我目前正在创建一个基于PHP的网站，需要列出程序...我尝试自己创建一个自定义CSS代码，尝试打破模板来获取CSS。但一切都失败了。那么有人可以帮助我获得div的CSS代码，它看起来像下面给出的

enter image description here

我会自己添加按钮和其他图标的类。我只想要div这也很有责任感。我不是很熟悉CSS。我只想要对齐。不是里面的花哨元素。

Answer 1

我做了小提琴here请检查一下，希望你能根据自己的需要编辑小提琴

HTML

<div class='customHeight'>
    <div class='row'>
        <div class='col-sm-6 custom'>
            <div class='dateHolder'>27 Nov</div>
        </div>
        <div class='col-sm-6'>
            <div class='row '>
                <h3>Some title goes here</h3>
            </div>
            <div class="row bottomGap">location / date goes here</div>
            <div class="row bottomGap">Content goes here Content goes here
                Content goes here Content goes here Content goes here Content goes
                here Content goes here Content goes here Content goes here</div>
            <div class='row'>
                <button class="btn btn-default">
                    Buy Tickets
                    <button>
                        <button class="btn btn-danger">
                            Buy Tickets
                            <button>
            </div>
        </div>    
    </div>

CSS：

.bottomGap { 边距：5px的; }

.custom {
   background-color: #ccc;
    height:200px; 
}
.customHeight{
 height:200px;   

}
.dateHolder{
    height:80px;
    width:50px;
    background-color:#000;
    padding-top:10px;
    padding-left:10px;
}

*

Answer 2

这样的事情怎么样：

＆＃13;

* { box-sizing: border-box }

.c {
  height: 150px;
  width: 500px;
  background-color:#eee;
  margin: 5px;
  padding: 10px;
}

.c:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.c > div {
  padding: 5px;
  height:100%;
  
}

.c > div:first-child {
  float:left;
  width: 30%;
  background-color:#aaa;
  margin:0 0 0 0;
}
.c > div:last-child {
  float:left;
  width: 70%;
  background-color:#ddd;
}

＆＃13;

<div class="c">
  <div>left</div>
  <div>right</div>
</div>

＆＃13;

博客列表的自定义CSS

2 个答案: