我希望实现3列布局,我的HTML和CSS代码中包含以下代码。我有我希望容器看起来像的布局,现在我想添加列,但似乎无法在过去的几个小时内正确。任何指导都将不胜感激和赞赏。
提前谢谢
<div class="wrapper">
<div class="card radius shadowDepth1">
<div class="card__image border-tlr-radius">
<%= link_to image_tag(deal.picture.url(:small), class: "border-tlr-radius") %>
</div>
<div class="card__content card__padding">
<div class="card__share">
<div class="card__social">
<a class="share-icon facebook" href="#"><span class="fa fa-facebook"></span></a>
<a class="share-icon twitter" href="#"><span class="fa fa-twitter"></span></a>
<a class="share-icon googleplus" href="#"><span class="fa fa-google-plus"></span></a>
</div>
<a id="share" class="share-toggle share-icon" href="#"></a>
</div>
<div class="card__meta">
<a href="#">Expires I</a>
<%= distance_of_time_in_words(Time.now.utc, deal.end_time) %>
</div>
<article class="card__article">
<h2 class="#"><%= link_to deal.title, deal, {:style=>'color:#617475;', :class => "css_class"} %></h2>
<p> <%= deal.description %></p>
</article>
</div>
<div class="btn-group btn-group-justified">
<a href="javascript:void(0)" class="btn btn-default"><p> $<%= deal.item_price %></a>
<a href="javascript:void(0)" class="btn btn-default">$30.00</a>
<a href="javascript:void(0)" class="btn btn-material-light-green">Buy Now!</a>
</div>
</div>
</div>
</div>
</div>
@import 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
@import 'http://fonts.googleapis.com/css?family=Roboto:700,400';
/*
* Basic Reset
*/
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/**
* Basics Styles
*/
html {
font-size: 62.5%;
}
body {
background-color: #eee;
font-family: Roboto;
font-weight: 400;
font-size: 1.6em;
line-height: 1.6;
color: #666;
}
a {
text-decoration: none;
color: #3498db;
}
a:hover {
color: #2980b9;
}
h2 {
line-height: 1.2;
margin-bottom: 1.6rem;
}
.wrapper {
max-width: 400px;
margin: 50px auto;
padding-left: 1em;
padding-right: 1em;
}
/**
* Helpers
*/
.border-tlr-radius {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.text-center { text-align: center; }
.radius { border-radius: 2px; }
.padding-tb { padding-top: 1.6rem; padding-bottom: 1.6rem;}
.shadowDepth0 { box-shadow: 0 1px 3px rgba(0,0,0, 0.12); }
.shadowDepth1 {
box-shadow:
0 1px 3px rgba(0,0,0, 0.12),
0 1px 2px rgba(0,0,0, 0.24);
}
/**
* Card Styles
*/
.card {
background-color: #fff;
margin-bottom: 1.6rem;
}
.card__padding {
padding: 1.6rem;
}
.card__image {
min-height: 100px;
background-color: #eee;
}
.card__image img {
width: 100%;
max-width: 100%;
display: block;
}
.card__content {
position: relative;
}
/* card meta */
.card__meta time {
font-size: 1.5rem;
color: #bbb;
margin-left: 0.8rem;
}
/* card article */
.card__article a {
text-decoration: none;
color: #444;
transition: all 0.5s ease;
}
.card__article a:hover {
color: #2980b9;
}
/* card action */
.card__action {
overflow: hidden;
padding-right: 1.6rem;
padding-left: 1.6rem;
padding-bottom: 1.6rem;
}
.card__author {}
.card__author img,
.card__author-content {
display: inline-block;
vertical-align: middle;
}
.card__author img{
border-radius: 50%;
margin-right: 0.6em;
}
.card__share {
float: right;
position: relative;
margin-top: -42px;
}
.card__social {
position: absolute;
top: 0;
right: 0;
visibility: hidden;
width: 160px;
transform: translateZ(0);
transform: translateX(0px);
transition: transform 0.35s ease;
}
.card__social--active {
visibility: visible;
/*z-index: 3;*/
transform: translateZ(0);
transform: translateX(-48px);
transition: transform 0.35s ease;
}
.share-toggle {
z-index: 2;
}
.share-toggle:before {
content: "\f1e0";
font-family: 'FontAwesome';
color: #3498db;
}
.share-toggle.share-expanded:before {
content: "\f00d";
}
.share-icon {
display: inline-block;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
border-radius: 50%;
background-color: #fff;
transition: all 0.3s ease;
outline: 0;
box-shadow:
0 2px 4px rgba(0,0,0, 0.12),
0 2px 4px rgba(0,0,0, 0.24);
}
.share-icon:hover,
.share-icon:focus {
box-shadow:
0 3px 6px rgba(0,0,0, 0.12),
0 3px 6px rgba(0,0,0, 0.24);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #00abe3;
}
.googleplus {
background-color: #d3492c;
}
.facebook,
.twitter,
.googleplus {
color: #fff;
}
.facebook:hover,
.twitter:hover,
.googleplus:hover {
color: #eee;
}
/// concept ///
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
$primary-text-color: #000;
$secondary-text-color: #A1A1A4;
$theme-color: #8DC63F;
* {
box-sizing: border-box;
}
body {
background: #f5f5f5;
max-width: 1200px;
margin: 0 auto;
padding: 10px;
font-family: 'Lato', sans-serif;
text-shadow: 0 0 1px rgba(255,255,255,0.004);
font-size: 100%;
font-weight: 400;
}
.toggler {
color: $secondary-text-color;
font-size: 1.25em;
margin-left: 8px;
text-align: center;
cursor: pointer;
&.active {
color: $primary-text-color;
}
}
.surveys {
list-style: none;
margin: 0;
padding: 0;
}
%card-style {
display: block;
margin-top: 10px;
padding: 20px;
border-radius: 2px;
background: white;
box-shadow: 0 2px 1px rgba(170,170,170,0.25);
}
.survey-item {
@extend %card-style;
}
.survey-name {
font-weight: 400;
}
.list {
.survey-item {
position: relative;
padding: 0;
font-size: 14px;
line-height: 40px;
.pull-right {
position: absolute;
right: 0;
top: 0;
}
@media screen and (max-width: 800px) {
.stage:not(.active) {
display: none;
}
}
@media screen and (max-width: 700px) {
.survey-progress-bg {
display: none;
}
}
@media screen and (max-width: 600px) {
.pull-right {
position: static;
line-height: 20px;
padding-bottom: 10px;
}
}
}
.survey-country,
.survey-progress,
.survey-completes,
.survey-end-date {
color: $secondary-text-color;
}
.survey-country,
.survey-completes,
.survey-end-date,
.survey-name,
.survey-stage {
margin: 0 10px;
}
.survey-country {
margin-right: 0;
}
.survey-end-date,
.survey-completes,
.survey-country,
.survey-name {
vertical-align: middle;
}
.survey-end-date {
display: inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden;
}
}
.survey-stage .stage {
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
overflow: hidden;
border-radius: 50%;
padding: 0;
margin: 0 2px;
background: #f2f2f2;
text-indent: -9999px;
color: transparent;
line-height: 16px;
&.active {
background: $secondary-text-color;
}
}
.list {
.list-only {
display: auto;
}
.grid-only {
display: none !important;
}
}
.grid {
.grid-only {
display: auto;
}
.list-only {
display: none !important;
}
}
.grid {
.survey-item {
position: relative;
display: inline-block;
vertical-align: top;
height: 200px;
width: 250px;
margin: 10px;
@media screen and (max-width: 600px) {
display: block;
width: auto;
height: 150px;
margin: 10px auto;
}
}
.survey-name {
display: block;
max-width: 80%;
font-size: 16px;
line-height: 20px;
}
.survey-country {
font-size: 11px;
line-height: 16px;
text-transform: uppercase;
}
.survey-country,
.survey-end-date {
color: $secondary-text-color;
}
.survey-end-date {
&:before {
content: 'Ends\00a0';
}
&.ended:before {
content: 'Ended\00a0';
}
}
.survey-progress {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
padding: 20px;
border-top: 1px solid #eee;
font-size: 13px;
}
.survey-progress-bg {
width: 40%;
display: block;
@media screen and (max-width: 200px) {
display: none;
}
}
.survey-progress-labels {
position: absolute;
right: 20px;
top: 0;
line-height: 40px;
@media screen and (max-width: 200px) {
right: auto;
left: 10px;
}
}
.survey-progress-label {
line-height: 21px;
font-size: 13px;
font-weight: 400;
}
.survey-completes {
line-height: 21px;
font-size: 13px;
vertical-align: middle;
}
.survey-stage {
position: absolute;
top: 20px;
right: 20px;
.stage {
display: none;
}
.active {
display: block;
}
}
.survey-end-date {
font-size: 12px;
line-height: 20px;
}
}
.survey-progress-label {
vertical-align: middle;
margin: 0 10px;
color: $theme-color;
}
.survey-progress-bg {
display: inline-block;
vertical-align: middle;
position: relative;
width: 100px;
height: 4px;
border-radius: 2px;
overflow: hidden;
background: #eee;
}
.survey-progress-fg {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
left: 0;
margin: 0;
background: $theme-color;
}