0

我正在制作一个简单的 HTML 页面，其中包含并排放置的 3 个 div，中间的一个包含与窗口一样高的图片 - 它必须在一个 HTML 代码中完全独立，没有外部内容。

我只管理调整大小的东西（一旦放入 div 就会中断）：

<head>
    <style> 
        * { 
            padding: 0; 
            margin: 0; 
        } 

        .fit { 
            max-width: 100%; 
            max-height: 100%; 
        } 

        .center { 
            display: block; 
            margin: auto; 
        } 
    </style> 

    <script src="code.jquery.com/jquery-latest.js"></script>; 
    <script type="text/javascript" language="JavaScript"> 
        function set_body_height() { 
            var wh = $(window).height(); 
            $('body').attr('style', 'height:' + wh + 'px;'); 
        } 

        $(document).ready(function() { 
            set_body_height(); 
            $(window).bind('resize', function() { 
                set_body_height(); 
            }); 
        }); 
    </script> 
</head>
4

2 回答 2

0

你是这样的意思吗？

<div style="float:left; width:33%; background-color:#003366;">test</div>
<div style="float:left; width:33%; background-color:#004366;">test</div>
<div style="float:left; width:33%; background-color:#005366;">test</div>
于 2016-10-20T14:37:34.433 回答
0

“没有外部东西”，我假设您的意思是要在一个 html 文档中添加样式？您可以像@Gildas 那样将其添加到标题或内联中。

我认为您可以使用 flexbox 完成您的要求。

HTML：

<div class="wrapper">
  <div class="wrap-item">div 1</div>
  <div class="wrap-item wrap-img"> div 2 with img</div>
  <div class="wrap-item"> div 3</div>
</div>

CSS：

.wrapper{
  width: 80vw;
  height: 100vh;
  border: 1px solid black;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.wrap-item{
  width: 100%;
  height: 80%;
  border: 1px solid red;
}

.wrap-img{
  height: 100%;
  border: 1px solid blue;
}

这是代码笔

于 2016-10-20T14:47:20.003 回答