所以基本上我正在尝试创建一个顶部带有菜单栏的页面，然后是一个主容器，该容器按75％到25％的比例分成2个部分，最重要的是这个容器的背景应该伸展无限地水平。 不幸的是我在这一点上有点失落所以这是我现在的代码
@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); }
body { background-color: #2d2d2d; }
h1 {
color: white; font-family: UbuntuG; font-size: 30;
}
h2 {
color: white; font-family: UbuntuG; font-size: 18;
}
p {
color: white; font-family: Arial; font-size: 16;
}
table, th, td {
border: 1px solid #1d1d1d; border-spacing: 0; color: white; font-family: Arial; font-size: 16;
}
td {
text-align: center;
padding: 0;
height: 48px;
min-width:48px;
}
a {
display: block;
text-decoration: none;
color: white;
font-family: UbuntuG;
font-size: 16;
height:43px;
line-height:43px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1d1d1d;
}
li {
float: left; border-right: 2px solid white;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #00BFFF;
}
.left,
.right {
float: right;
width: 46%;
padding: 2%;
}
.selector {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
}<html>
<head>
<title>Radio</title>
<meta content="??">
<link rel="stylesheet" type="text/css" href="theme.css">
<style>
table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; }
h1 { color: white; font-family: UbuntuG; font-size: 30; }
</style>
</head>
<body>
<div style="margin-top:-8;margin-right:-8;margin-left:-8"><ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">Who are we?</a></li>
<li><a href="#contact">Contact</a></li>
</ul></div>
<div style="background-color: black">
<div class="right" align="right">
<img height=300px width=300px style="border:0px solid white;" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fimages.apple.com%2Fdownloads%2Fdashboard%2Fstatus%2Fimages%2Fpolarclockwidget_20070723105852.jpg&f=1">
<img height=300px width=300px style="border:0px solid white;" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fa5.mzstatic.com%2Fus%2Fr30%2FPurple4%2Fv4%2Fae%2F41%2F4d%2Fae414d52-c726-ac67-27ea-02b8b56fcb37%2Ficon.png&f=1">
</div>
<span class="left" align="left">
<p>PLAY NOW WIDGET</p>
</span>
</div>
</body>
</html>
答案 0 :(得分：0)
以下是我从您的问题中理解的解决方案。 你的主要顶级菜单div是全宽100％，现在播放宽度的内容容器是75％，img div是25％，容器有一定的固定宽度1200px（示例宽度）..请参阅下面的代码。
@font-face { font-family: UbuntuG; src: url('ubuntu-fonts/Ubuntu-L.ttf'); }
*{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
body { background-color: #2d2d2d; }
h1 {
color: white; font-family: UbuntuG; font-size: 30;
}
h2 {
color: white; font-family: UbuntuG; font-size: 18;
}
p {
color: white; font-family: Arial; font-size: 16;
}
table, th, td {
border: 1px solid #1d1d1d; border-spacing: 0; color: white; font-family: Arial; font-size: 16;
}
td {
text-align: center;
padding: 0;
height: 48px;
min-width:48px;
}
a {
display: block;
text-decoration: none;
color: white;
font-family: UbuntuG;
font-size: 16;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1d1d1d;
}
li {
float: left; border-right: 2px solid white;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #00BFFF;
}
.selector {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
}
/*Top full width container*/
.FullWidthContainer{ width:100%}
/*Content Container With max-width:1200px for example*/
.MainContainer{max-width:1200px; width:100%; margin: 0px auto; }
/* content containre divided in left-75% and right-25%}*/
.left{ width:75%; padding:2%; float:left;}
.right{ width:25%; padding:2%; float:right}
.right img{ width:100%}<html>
<head>
<title>Radio</title>
<meta content="??">
<link rel="stylesheet" type="text/css" href="theme.css">
<style>
table, th, td { border: 5px solid white; border-spacing: 0; color: #1d1d1d; font-family: Arial; font-size: 16; }
h1 { color: white; font-family: UbuntuG; font-size: 30; }
</style>
</head>
<body>
<div class="FullWidthContainer"><ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">Who are we?</a></li>
<li><a href="#contact">Contact</a></li>
</ul></div>
<div style="background-color: black" class="FullWidthContainer">
<div class="MainContainer">
<span class="left" align="left">
<p>PLAY NOW WIDGET</p>
</span>
<div class="right" align="right">
<img height=300px width=300px style="border:0px solid white;" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fimages.apple.com%2Fdownloads%2Fdashboard%2Fstatus%2Fimages%2Fpolarclockwidget_20070723105852.jpg&f=1">
<img height=300px width=300px style="border:0px solid white;" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fa5.mzstatic.com%2Fus%2Fr30%2FPurple4%2Fv4%2Fae%2F41%2F4d%2Fae414d52-c726-ac67-27ea-02b8b56fcb37%2Ficon.png&f=1">
</div>
</div>
</div>
</body>
</html>