网站库部分在较小的屏幕上剥离
你好我正在制作一个网站布局，我遇到了责任问题。
在更大的屏幕上，它看起来像
在较小的一个上我得到
图库不是一行而是两行 这是我的HTML文件
body header
{
font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;
}
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#menu li{
display:inline-block;
float:left;
margin-right: 1px;
}
#menu li a{
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family:
"Helvetica Neue"
,Helvetica,
Arial,
sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*hover for top level
#menu li:hover a {
background: #19c589;
}
/*drop down links
#menu li:hover ul a{
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*drop down hover
#menu li:hover ul a:hover{
background: #19c589;
color: #fff;
}
/*hide drop down links
#menu li ul{
display: none;
float: none;
}
/*vertical drop down
#menu li ul li{
display: block;
float: none;
}
/*prevent text wrapping
#menu li ul li a{
width:auto;
min-width: 100px;
padding:0 20px;
}
/*Display drop down on hover
#menu ul li a:hover + .hidden,.hidden:hover{
display: block;
}
*/
/*Strip the ul of padding and list styling*/
body{
margin: 0;
padding: 0;
border: 0;
font-family: 'Roboto',sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.75em;
color:#777;
vertical-align: baseline;
}
h1,h2,h3,h4,h5,h6
{
font-weight: 300;
color: #777;
}
h2
{
letter-spacing: -0.025em;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
color: inherit;
text-decoration: none;
}
#header{
height:250px;
position: relative;
background: url(horizons.jpg);
background-position-x: 30%;
background-position-y: 90%;
background-repeat-x: no-repeat;
/*
background-attachment: fixed
*/
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
#menuDiv ul {
position: relative;
width:auto;
list-style-type:none;
margin:0;
margin-top: 10px;
padding:0;
top:0;
position: fixed;
margin-left: auto;
margin-right: auto;
}
/*Create a horizontal list with spacing*/
#menuDiv li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
#menuDiv li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height:
font-family: "Oleo Script","Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
#menuDiv li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
#menuDiv li:hover ul a {
background: #f3f3f3;
color: #2f0404;
height: 50px;
line-height: 40px;
}
/*Hover state for dropdown links*/
#menuDiv li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
#menuDiv li ul {
display: none;
}
/*Make dropdown links vertical*/
#menuDiv li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
#menuDiv li ul li a {
width: inherit;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
#menuDiv ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#menuDiv ul#menu li:hover .hidden{
display: block;
}
/*For smartphone devices*/
@media screen and(max-width : 760px){
/*Dropdow inline*/
#nav ul{
position:static;
display: none;
}
/*vertical spacing*/
#nav li{
margin-bottom: 1px;
}
/*Make all menu links full width*/
#nav ul li, li a{
width: 100%;
}
/*Display 'show menu' link*/
#nav .show-menu {
display: block;
}
}
/*Show menu for phone browsers and hide it by default*/
#nav .show-menu{
font-family: "Helvectica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
#nav input[type=checkbox]{
display: none;
}
/*Show menu when checkbox is chechked*/
#nav input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Wrap of the article
setting some positon width etc
*/
*/
#articleWrap{
}
#allContent{
vertical-align: baseline;
display:block;
float:left;
}
#articleContent{
max-width: 50%;
font-size: 11pt;
margin-left: auto;
margin-right:auto;
max-width:500px;
min-width: 100px;
}
/*leftSidebar holds row of links and comment section*/
/*row holds article field and leftSidebar*/
/*
.row {
font-weight: 300;
font-size: 10px;
line-height: 1.3;
padding-left: 10px;
padding-top:50px;
box-sizing: border-box;
float:left;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0;
top:0;
display: inline-flex;
}
.row header{
font-size:3.3em;
text-align: center;
padding-left: 40px;
}
.row list1{
float:left;
}
.row list2{
clear:left
}
.leftList{
float:left;
}
.leftList ul{
list-style-type: none;
}
.leftList li{
text-decoration: none;
border-bottom: 1px solid grey;
padding: 5px;
margin: 2px;
}
.leftList li:hover{
transform: scale(1.05);
}
leftSideBar properties*/
section,#textWrap {
margin-bottom: 3em;
vertical-align: top;
}
section {
padding-left: 50px;
padding-right: 50px;
}
/*Header element in section*/
#mainContent header{
/* padding-left: 50px; */
padding-top:40px;
margin-top:10px;
font-size:3.0em;
line-height: 1.3em;
letter-spacing: 2.7px;
text-align: center;
}
/*Left side bar configuration*/
/*date of comment add */
.posted
{
font-weight: bold;
}
.sidebar:first-child>*{
padding-top:0!important;
}
.sidebar>*{
padding-left:50px;
min-width: 400px;
}
.sidebar .row header{
padding-top:40px;
font-size:26pt;
}
/**/
/* remove bullets from lists */
.article-list li{
list-style-type: none;
}
.article-list a {
text-decoration: none;
color:#b9ba9b;
padding-left: 10px;
}
.article-list a:hover{
color:#6f6f5d;
}
.leftList header {
}
.commentSection header{
font-size:26pt;
}
*/
}
#textWrap{
width: 80.0%;
padding-left: 0;
}
#text{
font-size:13pt;
}
#mainContent{
display: inline-block;
max-width: 1000px;
min-width: 300px;
}
#main{
width: 100%;
}
#galleryIn{
}
.imageIn img{
width:200px;
height:200px;
margin:10px;
float:left;
box-shadow: 10px 10px 5px #888888;
}
.article-list li
{
}
/*Images preview */
#separatorImage header{
font-size:26pt;
}
ul.defaul li{
font-size:0.95em;
}<html >
<head>
<meta lang="pl">
<META charset="UTF-8">
<TITLE>Tytuł strony!</TITLE>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style2.css">
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<META NAME="description" CONTENT="Site description">
<META NAME="robots" CONTENT="ALL">
</head>
<body>
<div id="header">
</div>
<div id="SelectNoStyle">
<div id="menuDiv">
<ul id="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About ￬</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
<li>
<a href="#">Gallery ￬</a>
<ul class="hidden">
<li><a href="#">Photography</a></li>
<li><a href="#">ConceptArt</a></li>
<li><a href="#">Funny</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="allContent">
<div id="mainContent">
<div id="textWrap">
<section id="text">
<header style="font-size:3.4em;">Do you live fully ?</header>
<p>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor.
</p>
<p>
Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer.
</p>
<p>
Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</p>
<p>
varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</p>
</section>
</div>
</div>
</div>
<div class="sidebar">
<div class="row">
<div id="separatorImage">
<header> New in gallery </header>
<div id="galleryIn">
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
<div class="imageIn">
<a href="images/landscapes/839274-landscape-sunset.jpg">
<img src="images/landscapes/839274-landscape-sunset.jpg"></a>
</div>
</div>
</div>
<div class="commentSection">
<section class="leftComment">
<header> Last Comments</header>
<ul class="last-com-list"></ul>
<li>
<p class="posted">
MAY 21, 2014 | (10 ) COMMENTS
</p>
<p class="comment">
Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.
</p>
</li>
<li>
<p class="posted">
MAY 21, 2014 | (10 ) COMMENTS
</p>
<p class="comment">
Nullam non wisi a sem eleifend. Donec mattis libero eget urna. Pellentesque viverra enim.
</p>
</li>
</section>
</div>
</div>
<!--PHP gallery which loads images from folder -->
</body>
</html>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？