When the viewer has a wide enough window (desktop/tablet) I want to use a tabular layout for my information:
当观众有足够宽的窗口(桌面/平板电脑)时,我想使用表格布局来获取我的信息:
On narrower windows (e.g smartphone) I want a more compact layout
在较窄的窗口(例如智能手机)上,我想要一个更紧凑的布局
I want to achieve this layout-change using CSS without any change in HTML
我希望使用CSS实现这种布局更改,而不需要对HTML进行任何更改
My HTML uses simple <h2> and <p> elements for the headings and content.
我的HTML使用简单的
和
元素作为标题和内容。
I've played around with CSS float:left and display:inline but found it difficult to achieve what I want.
我玩过CSS float:left和display:inline但很难实现我想要的东西。
What is the simplest way to achieve this in CSS while adhering to "responsive design" and "mobile-first" principles?
在坚持“响应式设计”和“移动优先”原则的同时,在CSS中实现这一目标的最简单方法是什么?
1 个解决方案
#1
Here's what I came up with.
这就是我想出来的。
The compact layout is close to the default display for <h2> and <p> and is the default layout with this CSS - so "mobile first".
紧凑的布局接近
和
的默认显示,并且是这个CSS的默认布局 - 所以“移动优先”。
A media selector is used to modify the layout for devices where the window is wider.
媒体选择器用于修改窗口较宽的设备的布局。
float: left is used to allow the headings to line-up vertically with the following text.
float:left用于允许标题与以下文本垂直对齐。
The top and bottom margins are set to zero on the headings so that headings with a single line of associated content don't interfere with each other causing a staggerred layout.
标题上的顶部和底部边距设置为零,因此具有单行相关内容的标题不会相互干扰,从而导致错开的布局。
margin-left: 13em is used to keep the content clear of the headings and to produce a visual representation similar to what would be expected if the HTML had used a <table>.
margin-left:13em用于保持内容不受标题影响,并产生类似于HTML使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test folding</title>
<style>
h2 {
font-size: 100%;
font-weight: bold;
}
p {
margin-left: 1em;
}
@media screen and (min-width: 600px) {
h2 {
margin-top: 0;
margin-bottom: 0;
float:left;
}
p {
margin-left: 13em;
margin-top: 0;
}
}
</style>
</head>
<body>
<h1>Test folding</h1>
<h2>Lorem Ipsum</h2>
<p>Dolor Sit amet</p>
<h2>Lorem Ipsum Dolor</h2>
<p>Sit amet consectetur</p>
<h2>Lorem Ipsum</h2>
<p>Dolor Sit amet consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<p>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<h2>Lorem Ipsum Dolor</h2>
<p>Sit amet consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</body>
</html>#1
Here's what I came up with.
这就是我想出来的。
The compact layout is close to the default display for <h2> and <p> and is the default layout with this CSS - so "mobile first".
紧凑的布局接近
和
的默认显示,并且是这个CSS的默认布局 - 所以“移动优先”。
A media selector is used to modify the layout for devices where the window is wider.
媒体选择器用于修改窗口较宽的设备的布局。
float: left is used to allow the headings to line-up vertically with the following text.
float:left用于允许标题与以下文本垂直对齐。
The top and bottom margins are set to zero on the headings so that headings with a single line of associated content don't interfere with each other causing a staggerred layout.
标题上的顶部和底部边距设置为零,因此具有单行相关内容的标题不会相互干扰,从而导致错开的布局。
margin-left: 13em is used to keep the content clear of the headings and to produce a visual representation similar to what would be expected if the HTML had used a <table>.
margin-left:13em用于保持内容不受标题影响,并产生类似于HTML使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test folding</title>
<style>
h2 {
font-size: 100%;
font-weight: bold;
}
p {
margin-left: 1em;
}
@media screen and (min-width: 600px) {
h2 {
margin-top: 0;
margin-bottom: 0;
float:left;
}
p {
margin-left: 13em;
margin-top: 0;
}
}
</style>
</head>
<body>
<h1>Test folding</h1>
<h2>Lorem Ipsum</h2>
<p>Dolor Sit amet</p>
<h2>Lorem Ipsum Dolor</h2>
<p>Sit amet consectetur</p>
<h2>Lorem Ipsum</h2>
<p>Dolor Sit amet consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<p>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
<h2>Lorem Ipsum Dolor</h2>
<p>Sit amet consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</body>
</html>