Question

如何创建响应式双列布局，左栏显示命中列表，右栏显示详细信息面板（详细信息面板），显示列表中所选项目的详细信息？

列表项应具有（相对）固定宽度，而详细信息面板应使用所有剩余空间。
两列都应该可滚动。
布局两侧应该有一些空白区域。
在页面顶部应该有一个固定的搜索区域。

编辑：这是我到目前为止......：

HTML

＆＃13;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>example</title>
    <link rel="stylesheet" type="text/css" href="Content/CSS/style.css">
</head>
<body>
	<div id="center">
		<header>
			<input type="text" placeholder="search...">
		</header>
		<nav>
			<ul>
				<li>
					<img src="http://lorempixum.com/100/100/nature/1">
					<h3>Headline 1</h3>
					<p>Lorem ipsum dolor sit amet
				</li>
				<li>
					<img src="http://lorempixum.com/100/100/nature/1">
					<h3>Headline 2</h3>
					<p>Lorem ipsum dolor sit amet
				</li>
			</ul>
		</nav>
		<div id="details">
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</div>
	</div>
</body>
</html>

＆＃13;

CSS

＆＃13;

body{
    width: 100%;
    height: 100%;
	margin: 0;
	padding: 0;	
}
header{
    position: fixed;
    top: 0;
    left:1%;
    width: 98%;
    height: 10%;
    background-color: #ddd;
}
nav{
    position: fixed;
    left: 1%;
    top:10%;
    width: 29%;
    min-width: 120px;
    background-color: #fff;
    height:90%;
	overflow-y: auto;
}
#details{
    position: fixed;
    right: 1%;
    top:10%;
    width: 69%;
    background-color: #fff;
    height:90%;
	overflow-y: auto;
}
#center {
	width: 100%;
	overflow-y:hidden;
 }

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: #fff	;
    border-left: 1px solid #fff;
}
::-webkit-scrollbar-thumb {
    background-color: #efefef;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}


ul {
	list-style-type: none;
	margin: 0;
	padding: 0;	
}
 
h3 {
	font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
li img {
  float: left;
  margin: 0 10px 0 0;
}
 
li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
 
li {
  padding: 10px;
  overflow: auto;
}
 
li:hover {
  background: #fff;
  cursor: pointer;
}

＆＃13;

问题：如何删除代表＆＃39; main＆＃39;的白色垂直条带？垂直滚动条？我想在两列中添加左右边距。

Answer 1

使用简单的html和css可以完成，但是，我认为你需要它是动态的。

我的例子是非常基本的，但这就是你想要的目标，但我不是在做你的设计，你应该自己做。

HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
    <input type="text" placeholder="search...">
</header>
<nav>
    <ul>
        <li>
            Hit 1
        </li>
        <li>
            Hit 2
        </li>
    </ul>
</nav>
<div id="details">
    <p>
        Lorem ipsum dolor 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. 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>
</div>
</body>
</html>

的CSS：

header{
    position: fixed;
    top: 0;
    left:1%;
    width: 98%;
    height: 10%;
    background-color: green;
}
nav{
    position: fixed;
    left: 1%;
    top:10%;
    width: 19%;
    min-width: 120px;
    background-color: red;
    height:90%;
}
#details{
    position: fixed;
    right: 1%;
    top:10%;
    width: 79%;
    background-color: blue;
    height:90%;
}
body{
    width: 100%;
    height: 100%;
}

Answer 2

我尝试使用基本的HTML和CSS。

它与上述解决方案类似：

代码将包含以下部分：

HTML：

 <!DOCTYPE html>
<html>
<head>
    <title>Responsive Two Page Layout</title>
</head>
<body>
<div id= "search">
<span id="searchSpan">
    <input type="text" value="" id="searchtext" placeholder="Search"/>
</span>
</div>
<div id="cols">
    <div id="hitList">
        <ul id="list">
            <li><a href="A.html" target="details">A</a></li>
            <li><a href="B.html" target="details">B</a></li>
            <li><a href="C.html" target="details">C</a></li>
            <li><a href="A.html" target="details">A</a></li>
            <li><a href="B.html" target="details">B</a></li>
            <li><a href="C.html" target="details">C</a></li>
            <li><a href="A.html" target="details">A</a></li>
            <li><a href="B.html" target="details">B</a></li>
            <li><a href="C.html" target="details">C</a></li>
            <li><a href="A.html" target="details">A</a></li>
            <li><a href="B.html" target="details">B</a></li>
            <li><a href="C.html" target="details">C</a></li>

        <ul>
    </div>
    <div id="detailsPanel">
        <iframe name="details" id="details" src="" frameBorder="0" >
        </iframe>
    </div>
</div>
</body>
</html>

CSS：

    #searchtext{
    width: 100%;
    border: 1em;
    height: 3em;
    border-color: black;
    border:1em;
    margin:0.5em;
}
#search{
    border-color: black;
    border:solid;
    width:100%;
    height:4em;
}
#searchSpan{
    display: block;
    overflow: hidden;
    border: 1em;
    border-color: #000;

}
div#cols{
    width:100%;
    margin:0.5em;

}
#hitList{
border-color: black;
border: solid;
width: 20%;
float: left;
height: 10em;
overflow: auto;
}
div#detailsPanel{
    border-color: black;
    border:solid;
    height: 10em;
}
ul{
    padding: 0em;
    margin:0em;
}
li{
    list-style: none;
    line-height: auto;
    border:solid;
    padding:0em;
    border-width:0.1em; 
}

链接指向不同的HTML页面A＆＃39; B和c等，它们将显示在详细信息面板中。

我使用iframe代替Div aas在iframe上显示网页比在div上更容易（这是我的意见，可以纠正。）

这是一个非常基本的解决方案，我快速制作并需要增强。希望这有帮助！

响应式两列布局（列表和详细信息面板）

2 个答案: