如何在代码中实现此设计？

我目前正在设计一个单页的网站，我希望一些网页有一列有文字，另一列有图片。然而，图像应该“补”了，我用这个代码的浏览器窗口大小：如何在代码中实现此设计？

<script type="text/javascript"> 
$(document).ready(function() { 
$(".screenheight").each(function(){ 
    var $this = $(this); 
    $this.css({'min-height':($(window).height())+'px'}); 

    $(window).resize(function(){ 
     $this.css({'min-height':($(window).height())+'px'}); 
    }); 
    }); 
}); 
</script>

这工作，但我不能找出如何仍与文本对齐列，到菜单（像页with width: 960px和margin: 0 auto;）

这是从设计我试图实现图像： imgur link

我希望有人能帮助我。

来源

2014-09-23 Victor

我不明白它到底是什么，你所需要的，或者是什么的问题。你能提供链接到完整的示例页面吗？ – developer82 2014-09-23 15:01:59

你可以提供你现在的html和css吗？当图像不完全适合空间时会发生什么，你想裁剪它的一部分吗？ – isogram 2014-09-23 15:02:05

使用Bootstrap，你可以定义2列并填充它们吗？ – 2014-09-23 15:06:12

而不是使用jQuery来获得窗口的高度，你应该看看使用CSS的视口长度vh & vw将事物设置为视口的大小。

这应该很容易给你整页的外观。但是，我还是不清楚你的问题是与列和菜单。

约在这里这些单位更多信息：Viewport Relative Lengths

来源

2014-09-23 15:04:08 Adjit

你好，谢谢你的链接，我会检查一下。我想将h1（在本例中是'Biografie'）对齐到菜单，所以就像菜单一样，我使用了宽度：960px;和余量：0自动; 但现在我实际上想要用图像填充屏幕，我不能将它放在div的内部，因为它会将自己居中，因此图像不会填满屏幕并显示白色条。我希望你明白，这很难解释。我已经包含一张图片，其中的指南代表了960px的宽度，margin：0 auto; http://imgur.com/JCOEYdY – Victor 2014-09-23 15:21:48

@Victor所以，纠正我，如果我错了，你希望图片占用整个页面的宽度，但在该中心的文本列？你可能会创建一张图片，显示你想要的样子吗？ – Adjit 2014-09-23 15:31:28

是的你是对的！我想布局看起来就像这样：http://imgur.com/OIaYV1a 我试着在文本的左边创建一列，为图片创建一个列，但我希望文本与“Claudia Couwenbergh“菜单中。 – Victor 2014-09-23 16:17:56

如何在代码中实现此设计？

回答

相关问题