时间戳

首页 > 解决方案 > 如何拥有可在移动设备和桌面设备上并排使用的部分

html - 如何拥有可在移动设备和桌面设备上并排使用的部分

问题描述

我有一个在台式机上运行良好但在移动设备上运行良好的网站。我需要一个侧边栏来显示我的广告，但在移动设备中，我看到这两个部分粘在一起，我基本上需要一种适用于移动设备和桌面设备的不同 css 样式

<html>
<head>
    <title>Blazeguides</title>
 
<style>
body {background-color: #8C8C8C;}
header {background-color: #FFFFFF; margin-left:15%; margin-right:15%; padding:3px; border-radius: 20px 20px 0px 0px;}
nav {background-color:#FFFFFF; margin-left: 15%; margin-right:15%; height:50px;}
a {color: #FFFFFF;}
.content {background-color: #696969; margin-left:15%; margin-right:15%;height:100%; padding:5px; border-radius: 0px 0px 20px 20px;}
.indent-1 {float: left;}
.indent-1 section {float: left;}
.sidecontent {height:100px; border: 2px solid black;}
.ni {border: 2px solid white; padding:25px; background-color:#000000;}
</style>
</head>
<body>
<header>
    <center><h1>Blazeguides</h1></center>
</header>
<nav><a class="ni" href="index.php">home</a><a class="ni" href="rpig">Raspberry pi guides</a><a class="ni" href="http://github.com/blazetools">Github</a></nav>
<div class="content">
 
<section class="indent-1">
<!---------------->
<section name="sidebar" style="background-color:#FFFFFF; width: 150px; height:100%; border-radius: 0px 0px 0px 30px; margin-top:-4px; margin-left:-5px;">
    <iframe data-aa='1145045' src='//acceptable.a-ads.com/1145045' scrolling='no' style='border:0px; padding:0; overflow:hidden; width:150px;' allowtransparency='true'></iframe>
<iframe data-aa='1145045' src='//acceptable.a-ads.com/1145045' scrolling='no' style='border:0px; padding:0; overflow:hidden; width:150px;' allowtransparency='true'></iframe>
<iframe data-aa='1145045' src='//acceptable.a-ads.com/1145045' scrolling='no' style='border:0px; padding:0; overflow:hidden; width:150px;' allowtransparency='true'></iframe>
<iframe data-aa='1145045' src='//acceptable.a-ads.com/1145045' scrolling='no' style='border:0px; padding:0; overflow:hidden; width:150px;' allowtransparency='true'></iframe>
 
</section>
<!-------------->
 
    <section name="content" style="height:100%;color: #FFFFFF; padding: 10px;">
        Hello, welcome to blazeguides. This site was made during my free time with many guides for different things. <br>
        Examples :<br>
        <ul>
        <li>Raspberry pi guides</li>
        </ul>
</section>
<!----------->
 
</section>
</div>
</body>
</html>

标签： htmlcss

解决方案

像这样尝试css网格：

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: 20px;
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 100%;
  }
}

/** some extra css to make example more visible **/

.grid > section {
  background: #f0f0f0;
  padding: 20px;
  text-align: center;
}
<div class="grid">
  <section>Section 1</section>
  <section>Section 2</section>
</div>

grid-gap: 20px;如果您不希望各部分之间有间距，请删除。

推荐阅读