表格单元格的响应问题

Question

我正在寻找下一页的解决方案：

我遇到问题的地方是＆＃34;地点＆＃34;下的表格。当浏览器调整大小时，我希望表中的每一行按以下方式分解：

地方名称

地址

在地图上查看（按钮）即将演示（按钮）

如果有的话，上面也应该全部出现在绿色背景中。

＆＃13;

＆＃13;

.wtb-table {
	display: table;
	width: 100%;
}
.wtb-row-one {
	display: table-row;
}
.wtb-row-one .wtb-placename, .wtb-row-one .wtb-address {
	background: #f2f8f2;
}
.wtb-row-two {
	display: table-row;
}
.wtb-placename {
	display: table-cell;
	color: #707070;
	font-size: 20px;
	font-weight: 600;
	padding: 15px 0 15px 2%;
	text-align: left;
	width: 30%;
}
.wtb-address {
	display: table-cell;
	color: #707070;
	font-size: 18px;
	font-weight: 400;
	text-align: right;
	padding-right: 2%;
	width: 30%;
}
.wtb-view-btn {
	display: table-cell;
	background: none;
	width: 15%;
}
.wtb-view-btn div {
	
}
.wtb-view-btn div a {
	font-size: 14px;
	color: #007940;
	padding: 10px 20px;
	font-weight: 600;
	border: 2px solid #007940;
	border-radius: 5px;
}
.wtb-demo {
	display: table-cell;
	background: none;
	width: 15%;
}
.wtb-demo a {
	padding: 10px 20px;
	background: #abc13d;
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

＆＃13;

<div class="wtb-table">
	<div class="wtb-row-one">
		<div class="wtb-placename">Name of Place</div>
		<div class="wtb-address">1234 Address St, Ottawa ON</div>
		<div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
		<div class="wtb-demo"><div><a href="#">UPCOMING DEMO</a></div></div>
		<div class="clear"></div>
	</div>
	<div class="wtb-row-two">
		<div class="wtb-placename">Name of Place</div>
		<div class="wtb-address">1234 Address St, Ottawa ON</div>
		<div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
		<div class="wtb-demo">&nbsp;</div>
		<div class="clear"></div>
	</div>
	<div class="wtb-row-one">
		<div class="wtb-placename">Name of Place</div>
		<div class="wtb-address">1234 Address St, Ottawa ON</div>
		<div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
		<div class="wtb-demo"><div><a href="#">UPCOMING DEMO</a></div></div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

调整页面大小时，按钮会出现问题。试试这个：

<div id="test">
<div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
<div class="wtb-demo"><div><a href="#">UPCOMING DEMO</a></div></div>
</div>

#test {
width: 366px;
}

只需在div之前添加一个div，类为“class =”wtb-view-btn“”，并在div之后添加类“class =”wtb-demo“”

为此div添加宽度。

Answer 2

请使用Bootstrap http://getbootstrap.com/css/

   <div class="wtb-table col-md-12">
    <div class="wtb-row-one col-md-4">
        <div class="wtb-placename">Name of Place</div>
        <div class="wtb-address">1234 Address St, Ottawa ON</div>
        <div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
        <div class="wtb-demo"><div><a href="#">UPCOMING DEMO</a></div></div>
        <div class="clear"></div>
    </div>
    <div class="wtb-row-two col-md-4">
        <div class="wtb-placename">Name of Place</div>
        <div class="wtb-address">1234 Address St, Ottawa ON</div>
        <div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
        <div class="wtb-demo">&nbsp;</div>
        <div class="clear"></div>
    </div>
    <div class="wtb-row-one col-md-4">
        <div class="wtb-placename">Name of Place</div>
        <div class="wtb-address">1234 Address St, Ottawa ON</div>
        <div class="wtb-view-btn"><div><a href="#">VIEW ON MAP</a></div></div>
        <div class="wtb-demo"><div><a href="#">UPCOMING DEMO</a></div></div>
    </div>
</div>