0
У меня есть несколько кнопок и вы хотите установить кнопку равной высоты с questlist_item. Я попытался поставить тот же css height:auto;, но высота по-прежнему не равна одинаковой. Любая идея, как установить кнопку с равной высотой? БлагодаряCSS div и кнопка одинаковой высоты
var questlist = [{
"startdate": "2015-01-08",
"questitem": [
{
"questid": "1",
"gifttype": "bbb",
"quantity": 100,
"questname": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"queststatus": "ready"
}, {
"questid": "2",
"gifttype": "bbb",
"quantity": 500,
"questname": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"queststatus": "done"
}, {
"questid": "3",
"gifttype": "bbb",
"quantity": 1000,
"questname": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"queststatus": "complete"
}, {
"questid": "4",
"gifttype": "bbb",
"quantity": 1200,
"questname": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"queststatus": "done"
}, {
"questid": "5",
"gifttype": "bbb",
"quantity": 2200,
"questname": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
"queststatus": "ready"
},
]
}];
questitemlist(questlist);
function questitemlist() {
var callquest = "<div class='questlist_container'>" +
"<div id='call_questitem'></div>" +
"</div>";
$("#call_quest").append(callquest);
var questlistobj = questlist[0].questitem;
$.each(questlistobj, function(i, obj) {
if (obj.queststatus == "ready") {
var questlist_item_button = "<input type='button' id='questlist_item_button_go" + obj.questid + "' class='questlist_item_button' id='questlist_item_button' value='GO !'/>";
$("#call_questitem").on("click", "#questlist_item_button_go" + obj.questid, function() {
});
console.log("#questlist_item_button_go" + obj.questid);
} else if (obj.queststatus == "done") {
var questlist_item_button = "<input type='button' id='questlist_item_button_reward" + obj.questid + "' class='questlist_item_button' id='questlist_item_button' value='REWARD !'/>";
$("#call_questitem").on("click", "#questlist_item_button_reward" + obj.questid, function() {
});
} else if (obj.queststatus == "complete") {
var questlist_item_button = "<label class='questlist_item_complete'><img class='questlist_item_img' src='img/check.png'/></label>";
}
var questlist_item = "<div class='questlist_item'>" +
questlist_item_button +
"<label class='questlist_item_questname'>" + obj.questname + "</label>" +
"<label class='questlist_item_gifttype'>" + obj.gifttype + " " + obj.quantity + " ★" + "</label>" +
"</div>";
$("#call_questitem").append(questlist_item);
});
}/* latin */
@font-face {
font-family: 'Antic';
font-style: normal;
font-weight: 400;
src: local('Antic'), local('Antic-Regular'), url(http://fonts.gstatic.com/s/antic/v7/XHDNSBKb2dlIyyA7tXPbSA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 300;
src: local('Raleway Light'), local('Raleway-Light'), url(http://fonts.gstatic.com/s/raleway/v9/-_Ctzj9b56b8RgXW8FAriSEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
.questlist_container {
color: #fff;
font-family: 'Raleway';
width: 0 auto;
height: 0 auto;
overflow: hidden;
border: 1px solid #FF1177;
margin: 0 auto;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
border-radius: 5px;
max-width: 100%;
max-height: 90%;
}
.questlist_container:hover {
overflow: auto;
overflow-x: hidden;
}
div::-webkit-scrollbar {
width: 4px;
}
div::-webkit-scrollbar-track {
background: #ccc;
opacity: 0.5;
position: absolute;
}
div::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #FF1177;
position: absolute;
}
.questlist_item {
width: 0 auto;
height: auto;
background: #ff5ea3;
border-bottom: 1px solid #fff;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
padding: 5px 5px 0px 10px;
}
.questlist_item_questname {
color: #FFC;
display: list-item;
height: auto;
list-style: none;
font-size: 13px;
}
.questlist_item_gifttype {
font-size: 11px;
display: list-item;
font-weight: bold;
list-style: none;
padding-bottom: 5px;
color: #FCC;
}
.questlist_item_button {
color: #FF1177;
font-family: 'Raleway';
font-size: 13px;
margin-top: -5px;
height: auto;
width: 100px;
float: right;
background: #fff;
border-left: 1px solid #FF1177;
border-top: none;
border-bottom: none;
font-weight: bold;
margin-right: -13px;
}
.questlist_item_button:hover {
background: #ff5ea3;
cursor: pointer;
color: #fff;
}
.questlist_item_complete {
margin-top: -5px;
height: auto;
width: 99px;
float: right;
background: #fff;
margin-right: -13px;
}
.questlist_item_img {
margin-top: 15px;
margin-left: 35px;
}
/*REEEEEEEEEEESPONSIVE*/
@media (max-width: 400px) {
.questlist_container {
width: 280px;
}
.questlist_item {
width: 280px;
}
.questlist_item_button {
margin-right: 0px;
}
.questlist_item_complete {
margin-right: 0px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="call_quest"></div>
Ваше решение намного лучше! спасибо –
приветствую :) –