使用@media修复桌面浏览器的布局和对齐方式

时间:2019-06-01 18:16:51

标签: html css wordpress

我有4个按钮。 .location.phone.email.visit-website,图片.awpcp-ad-primary-image和放大链接.enlarge

在Internet Explorer桌面视图中,它们都非常接近它们的需求。 picture centre, enlarge link below it, and the four buttons between the two yellow lines, all in a straight line, almost equidistant (id prefer equal spacing) and text below the bottom yellow line.

在所有其他浏览器中,缺少一个或多个按钮,缺少fafa,并且所有内容都不正确。

HTML:

<div class="entry-content">
<div id="classiwrapper"><ul class="awpcp-classifieds-menu awpcp- 
clearfix" data-breakpoints='{"tiny": [0,400], "small": [400,500]}' 
data-breakpoints-class-prefix="awpcp-classifieds-menu">
</ul><div id="showawpcpadpage">
<div class="awpcp-title"><a href="https://adsler.co.uk/wp-user-test- 
dashboard-2/awpcp-show-ad/33/room-to-rent-shepherds- 
bush/london/uk/acton/property-to-rent/">Room to rent, Shepherds 
Bush</a></div><br/><div class="showawpcpadpage">
<div class="awpcp-ad-primary-image"><a class="awpcp-listing-primary- 
image-thickbox-link thickbox thumbnail" 
href="https://adsler.co.uk/wp- 
content/uploads/awpcp/images/e5bd21e2c96778e005e0d9c52d672a
f0b726fc16-cab59a91-large.jpg" rel="awpcp-gallery-33"><img 
class="thumbshow" src="https://adsler.co.uk/wp- 
content/uploads/awpcp/thumbs/e5bd21e2c96778e005e0d9c52d672a
f0b726fc16- 
cab59a91-primary.jpg" alt="Thumbnail for the listing's main 
image" width="200" height="200"/></a><a class="thickbox enlarge" 
href="https://adsler.co.uk/wp- 
content/uploads/awpcp/images/e5bd21e2c96778e
005e0d9c52d672af0b726fc16-cab59a91-large.jpg">Click to enlarge 
image.</a></div>
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-reply- 
to-ad/33/room-to-rent-shepherds-bush/"><div class="email"><span>. 
<center><span class="fa fa-envelope"></span></center></span></div>. 
</a><a href="tel:<br/><label>Phone:</label> XXXXXXXXXXX"><div 
class="phone"><span><center><span class="fas fa-phone"</span>. 
</center></span></div></a><a href="http://maps.google.com/maps?q=. 
<br/><label>Location:</label> Acton, London, 
UK&zoom=14&size=512x512&maptype=roadmap&sensor=false""><div 
class="location"><span><center><span class="fas fa-map-marker-alt". 
</span></center></span></div></a>
<div class="visit-website"><VISIT WEBSITE:</div>
<br/><a  href="http://www.oaklandsestates.co.uk/site/go/search? 
sales=false&amp;includeUnavailable=true" target="_blank">Visit 
Website</a></div><div class="showawpcpadpage"><label>Price:</label> 
<strong>£ 545.00</strong></div><div class="fixfloat"></div>
<div class="showawpcpadpage"><div class="awpcp-subtitle">More 
 Information</div>

https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/33/room-to-rent-shepherds-bush/london/uk/acton/property-to-rent/

如何使用CSS修复所有这些问题?

0 个答案:

没有答案