CSS Adding column in pricing table
Question
Hi have this following codes taken from W3schools.com customized it for blogger blog post.
<style> /*----------Price Box--------------*/ .pricecolumns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } .price .priceheader { background-color: #2CB8DA; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #FFFFEF; font-size: 20px; } .pricebutton { background-color: #FBA614; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } </style>
<body> <div class="pricecolumns"> <ul class="price"> <li class="priceheader">Rent</li> <li class="grey">$ 18.99 / Month</li> <li>Test The Product on Live Market</li> <li class="grey"><a href="#" class="pricebutton">Rent</a></li> </ul> </div> <div class="pricecolumns"> <ul class="price"> <li class="priceheader" style="background-color:#4CAF50">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> </body>
But the problem is. the blocks are showing one after another. Not like with 2 columns as it shown in the website.
I couldn't add following code (As the tutorial suggested) because of this code it making blogger drop down menu look weird.
* { box-sizing: border-box; }
2 answers
solution1
3 ACCPTED 2017-04-28 09:37:50
There is a problem in your css. You used wrong css selector in css , a typo.
Change this-
.pricecolumns {
float: left;
width: 33.3%;
padding: 8px;
}
to this-
.price_columns {
float: left;
width: 33.3%;
padding: 8px;
}
Below are the approahes for 2 comlumns and 3 columns-
2 Columns-
/*----------Price Box--------------*/ .price_columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } .price .priceheader { background-color: #2CB8DA; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #FFFFEF; font-size: 20px; } .pricebutton { background-color: #FBA614; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 520px) { .pricecolumns { width: 100%; } }
<body> <div class="price_columns"> <ul class="price"> <li class="priceheader">Rent</li> <li class="grey">$ 18.99 / Month</li> <li>Test The Product on Live Market</li> <li class="grey"><a href="#" class="pricebutton">Rent</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:#4CAF50">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> </body>
3 Columns-
/*----------Price Box--------------*/ * { box-sizing: border-box; -moz-box-sizing: border-box; -moz-box-sizing: border-box; } .price_columns { float: left; width: 33.3%; padding: 8px; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2) } .price .priceheader { background-color: #2CB8DA; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #FFFFEF; font-size: 20px; } .pricebutton { background-color: #FBA614; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 520px) { .pricecolumns { width: 100%; } }
<body> <div class="price_columns"> <ul class="price"> <li class="priceheader">Rent</li> <li class="grey">$ 18.99 / Month</li> <li>Test The Product on Live Market</li> <li class="grey"><a href="#" class="pricebutton">Rent</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:#4CAF50">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:red">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> </body>
Box-Sizing only for this particular section:
/*----------Price Box--------------*/ .price_columns { float: left; width: 33.3%; padding: 8px; box-sizing: border-box; -moz-box-sizing: border-box; -moz-box-sizing: border-box; } .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .price:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2) } .price .priceheader { background-color: #2CB8DA; color: white; font-size: 25px; } .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .price .grey { background-color: #FFFFEF; font-size: 20px; } .pricebutton { background-color: #FBA614; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 520px) { .pricecolumns { width: 100%; } }
<body> <div class="price_columns"> <ul class="price"> <li class="priceheader">Rent</li> <li class="grey">$ 18.99 / Month</li> <li>Test The Product on Live Market</li> <li class="grey"><a href="#" class="pricebutton">Rent</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:#4CAF50">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> <div class="price_columns"> <ul class="price"> <li class="priceheader" style="background-color:red">Buy</li> <li class="grey">$ 27.99 Life Time</li> <li>Buy Forever License</li> <li class="grey"><a href="#" class="pricebutton">Buy Now!</a></li> </ul> </div> </body>
solution2
2 2017-04-28 09:35:02
<div class="price_columns">是您的错误，因为在CSS中您没有带下划线的类，而您有pricecolumns
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Adding stripe button to the pricing table
Bootstrap Column Pricing Table UI Issue
Pricing Table height issue
css: impossible to grow the pricing page
CSS table column rules
invert table column with css
Modifying column with in a table (CSS)
Target table column with CSS
Responsive table column with CSS
CSS selector for table column
Related Tags