在固定容器内固定左列和弯曲右列的CSS3布局

只是想知道这是否可以用于CSS，我尝试了一个布局，其中左手列具有固定宽度并且右手边具有弯曲宽度在一个固定的宽度内。在固定容器内固定左列和弯曲右列的CSS3布局

这里是图像

enter image description here

感谢您的任何建议的附件。

来源

2014-07-14 Bruce

你在找什么像[** this **]（http://jsfiddle.net/gUJ98/）？ – Harry

@哈利谢谢不是真正的右手边会很高兴成为流体 – Bruce

检查this可以帮助你

HTML

<div class="outer"> 
    <div class="left">Test</div> 
    <div class="right">Test</div> 
</div>

CSS

*{margin: 0} 
.outer { 
    max-width: 1444px; 
} 
.left { 
    float: left; 
    width: 200px; 
    height: 600px; 
    background: red 
} 
.right { 
    margin-left: 200px; 
    background: yellow; 
    height: 600px; 
}

来源

2014-07-14 06:24:23 Tushar

感谢它在你的演示链接下工作，所以基本上宽度是自动的？ – Bruce

您需要将float：left和width：200px设置为左边栏，并将margin-left：200px设置为正确的内容。 – Tushar

谢谢Tushar看看harry的例子，他没有margin-left：200px，但它看起来仍然有效。 – Bruce

你可以用表格来确定。不知道是否有人有更好的/替代方法。

<html> 
<head> 
<style> 
.container { width:400px; } 
.left { width:100px; background-color:red;} 
.right { width:100%; background-color:yellow;} 
</style> 
</head> 
<body> 
<table class="container"> 
<tr> 
<td class="left">left section</td> 
<td class="right">right section</td> 
</tr> 
</table> 
</body> 
</html>

enter image description here

来源

2014-07-14 06:10:20 ben

谢谢本嗯...表很难处理响应式设计，我会尽量避免，如果我可以。谢谢无论如何标记你的解决方案之一。 – Bruce

你可以使用float为： HTML：

<div class="left-div">This is left DIV with lots of text text text text<br />and even more text</div> 
<div class="right-div"> 
    <div class="upper">This is upper right DIV</div> 
    <div class="lower">This is lower right DIV</div> 
</div>

CSS：

.left-div { 
    width: 200px; 
    float: left; 
} 

.right-div { 
    float: right; 
} 

.upper { 
    max-width: 100%; 
} 

.lower { 
    max-width: 1444px; 
}

小提琴：http://jsfiddle.net/68u8N/

来源

2014-07-14 06:25:12 janatuerlich

谢谢，但它需要包装在一个容器周围。也许我的照片不够清晰 – Bruce

改变了它，所以你不需要包装：http://jsfiddle.net/68u8N/1/ – janatuerlich

您可以通过下面的代码实现它。基本上我们将固定宽度的左侧div浮起来，并让右侧div占据其余部分。

HTML：

<div class='container'> 
    <div class='fixed-left'>abcd</div> 
    <div class='flexible'>12345</div> 
</div>

CSS：

.container{ 
    border: 1px solid black; 
    max-width: 440px; 
} 
.fixed-left{ 
    float: left; 
    width: 200px; 
    border: 1px solid blue; 
} 
.flexible{ 
    border: 1px solid red; 
    width: 100%; 
}

Demo | Demo without Margin

来源

2014-07-14 06:25:47 Harry

感谢哈里，道歉我的英文可能不是很清楚...:) – Bruce

有趣的是，他实际上得到了一个余裕：200px; （在右侧栏），这是很聪明...不知道我应该包括这个余裕左或没有，因为没有它仍然有效（这是你的例子） – Bruce

这取决于你希望布局如何工作非常低的分辨率（小于或等于200像素）。使用边距，正确的内容将始终在前面留出200px的空间，而如果没有它，右侧将简单地绕回到下一行并从左边开始。你可以在[本示例]中看到（http://jsfiddle.net/gUJ98/1/）。 – Harry

在固定容器内固定左列和弯曲右列的CSS3布局

回答

相关问题