Question

在CSS中，如果我将元素的宽度设置为50％，那么当我调整页面大小时它将会改变，而不是百分比，而是以像素为单位。

有没有办法将元素宽度设置为页面的某个百分比，但确保在调整页面大小时它不会改变？

Answer 1

只有使用CSS，您才能使用固定的容器大小，内部元素只能使用百分比。

＆＃13;

.container {
  width: 500px;
}
.innerDiv {
  width: 49%;
  float: left;
  text-align: center;
  background-color: #ccc;
  margin-left: 5px;
}

＆＃13;

<div class="container">
  <div class="innerDiv">
    Div 1
  </div>
  <div class="innerDiv">
    Div 2
  </div>
</div>

＆＃13;

如果您需要用户屏幕的％-tage，那么您需要使用JavaScript来获取实际大小，然后修改容器的大小。这也是一个例子：

＆＃13;

$(document).ready(function() {
  $('.container').width($(window).width());
});

＆＃13;

body {
  margin: 5px 0;
}
.container {
  width: 500px;
}
.innerDiv {
  width: 49%;
  float: left;
  text-align: center;
  background-color: #ccc;
  margin-left: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="innerDiv">
    Div 1
  </div>
  <div class="innerDiv">
    Div 2
  </div>
</div>

＆＃13;

Answer 2

将parent container设置为absolute position，如px

并在容器内设置%值..

的布局

Answer 3

它如此简单地使用媒体查询。 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CSS - 修正了百分比大小

3 个答案: