Question

我正在尝试创建一个可在移动设备/桌面上查看的响应式模板。我有按钮＆＃39;我创建的div是左侧并排放置的div。我希望它们居中，因为可能有3个按钮，或5个按钮或6个按钮。我希望所有按钮看起来都一样，但是如果有更多的按钮流向下一行。

像这样：

- 按钮1按钮 - 2按钮-3按钮-4

---------按钮6键7 --------

所以我不想使用相对div宽度但是要有动态，所以如果在手机上查看它可能会显示

- 按钮1 -

- 按钮2 -

- 按钮3 -

宽度容器必须是最大80％，因为那是我的模板，我想用图像排列。

我目前有：

＆＃13;

#container {
margin-left: 10% ;
margin-right: 10%;
width: 80%
}

.buttonbg {
color: #ffffff;
font-weight: 500;
line-height: normal;
text-decoration: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
border: 1px solid #ffffff;
padding: 10px 14px;
border-radius: 5px;
margin: 2px;
float: left;
width: 20%;
min-width: 165px;
}

a.button {
color: #ffffff;
font-weight: 500;
line-height: normal;
text-decoration: none;
}


#button1 { background-color: rgba(255, 204, 204,1); }
#button2 { background-color: rgba(255, 153, 153,1); }
#button3 { background-color: rgba(255, 163, 194,1); }
#button4 { background-color: rgba(255, 204, 153,1); }
#button5 { background-color: rgba(255, 245, 245,1); }
#button6 { background-color: rgba(255, 245, 245,1); }

.buttonbg:hover {
background-color: #cccccc !important;
}

＆＃13;

<div id="container">
<div class="buttonbg" id="button1"><a class="button"
href="http://client.samanthaongphoto.com/farahandsean" target="_blank"
alt="Farah &amp; Sean's Wedding Photos by Samantha Ong Photography">Wedding<br>
Gallery</a></div>
<div class="buttonbg" id="button2"><a class="button" href="slideshow/"
target="_blank"
alt="Farah &amp; Sean's Wedding Slideshow by Samantha Ong Photography">Wedding<br>
Slideshow</a></div>
<div class="buttonbg" id="button3"><a class="button" href="slideshow/"
target="_blank"
alt="Farah &amp; Sean's Wedding Slideshow by Samantha Ong Photography">Wedding<br>
Slideshow</a></div>
<div class="buttonbg" id="button4"><a class="button" href="slideshow/"
target="_blank"
alt="Farah &amp; Sean's Wedding Slideshow by Samantha Ong Photography">Wedding<br>
Slideshow</a></div>
<div class="buttonbg" id="button5"><a class="button" href="slideshow/"
target="_blank"
alt="Farah &amp; Sean's Wedding Slideshow by Samantha Ong Photography">Wedding<br>
Slideshow</a></div>
</div>

＆＃13;

如您所见，按钮向左对齐。有人可以帮忙吗？谢谢！

Answer 1

MOBILE-CSS（电话）

link rel =＆＃34; stylesheet＆＃34; HREF =＆＃34;风格/ mobile.css＆＃34; media =＆＃34;仅屏幕和（max-device-width：490px）＆＃34;

适用于移动设备
您使用

DESKTOP-CSS（PC）

link rel =＆＃34; stylesheet＆＃34; HREF =＆＃34;风格/ mobile.css＆＃34; media =＆＃34;仅屏幕和（min-device-width：491px）＆＃34;

该技术称为CSS medi-queries，用于创建响应式网页。
你必须把你的CSS代码写在另一个文件中并调用它，就像我向你展示的那样。（只有一个CSS文件 - 头上有两个html元素）

中心固定宽度div彼此相邻？

1 个答案: