html - 如何阻止 html/css 对象调整大小

Question

我将 Twitter bootstrap 用于制作 CSS 足球场的应用程序。我最初是通过下载 Twitter Bootstrap 并将其放入我的应用程序来构建应用程序的。然而，为了利用 LESS，我创建了一个新的应用程序，我在其中安装了 Twitter bootstrap 和用于 Rails 应用程序的 gem。在这个新的应用程序中，如果我改变浏览器的大小，足球场的尺寸也会改变(而且看起来很糟糕)。在旧应用程序中，我可以调整浏览器的大小，并且该字段将保持不变。到目前为止，我使用的 CSS 完全相同(即我没有在这个新应用程序中包含任何 LESS)并且 HTML 也是相同的，因此，我不确定要包含什么代码(如果有的话)这个问题。根据我告诉您的内容，您能否告诉我发生了什么以及如何防止调整大小？

这是足球场的代码，虽然因为它在我原来的应用程序中工作，我不知道用这个标记改变任何东西是否会有所不同，但布局也没有改变。

请注意，我喜欢响应式网站的想法，但是，我需要足球场保持相同的大小，所以如果可以使用 css 对其进行一些操作以确保它不会调整大小，我会满意。

    <div class="span3 field">
           <div class="row endzonenorth">

           </div>

       <div class="row field">
                <span class="qb"></span>
         <div class="horizontalRule">
                    <span class="funnyzone">&nbsp; &nbsp; &nbsp;END ZONE</span>
                </div> 
            <div class="horizontalRule">
             <div class="number right">10</div>
             <div class="number left">10</div>
                </div>
             <div class="horizontalRule">
             <div class="number right">20</div>
             <div class="number left">20</div>
                 </div>
             <div class="horizontalRule">
             <div class="number right">30</div>
             <div class="number left">30</div>
                 </div>
             <div class="horizontalRule">
             <div class="number right">40</div>
             <div class="number left">40</div>
                 </div>
             <div class="horizontalRule">
              <div class="number right">50</div>
             <div class="number left">50</div>
                 </div>
             <div class="horizontalRule">
                  <div class="number right">40</div>
             <div class="number left">40</div>
             </div>
             <div class="horizontalRule">
                 <div class="number right">30</div>
             <div class="number left">30</div>
             </div>
             <div class="horizontalRule">
                 <div class="number right">20</div>
             <div class="number left">20</div>
             </div>
             <div class="horizontalRule">
                 <div class="number right">10</div>
             <div class="number left">10</div>
             </div>
             <div class="horizontalRule">
                <span class="funnyzonesouth">END ZONE</span>
             </div>

       </div>
       <div class="row endzonesouth">

       </div>
     </div>

CSS:

div.horizontalRule
{
clear:both;
width:100%;
background-color:#fff;
height:1px;
margin-top:30px;
margin-bottom:30px;
display: block;
opacity: .75;
}

.number.right{
    color: #fff;
    position: absolute;
    right: 40px;
    margin-top: -10px;
}
.number.left{
    color: #fff;
    position: absolute;
    left: 40px;
    margin-top: -10px;
}
.funnyzone{

    opacity: .75;

    /*top: 7px;*/
    position: absolute;
    color: #fff;
    font-size: 22px;
    margin-top: -25px;
    margin-left: 15px;




}
.funnyzonesouth{
    font-size: 22px;
    color: #fff;
    opacity: .75;
    margin-top: 4px;
    margin-left: 40px;
    /*bottom: -3px;*/
    position: absolute;
    transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */



}

.span3.field{


  background-color: rgb(96, 211, 43);
}
.row.field{
    width: 90%;
  background-color: #56a636;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.row.endzonenorth{
    width: 90%;
    height: 25px;
  background-color: #56a636;
    color: #fff;
    font-size: 22px;
    margin-left: auto;
    margin-right: auto;

}
.row.endzonesouth{
    width: 90%;
    height: 25px;
  background-color: #56a636;
    color: #fff;
    font-size: 24px;
    margin-left: auto;
    margin-right: auto;

}
.row.endzone{
    height: 30px;
  background-color: #56a636;
}
.line {
    color: white; 
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 0.55,

}
.linea{
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    display:block;

}

.leftvertical {
    width:1px;
    height:410px;
    background-color:#fff;
    opacity: .55;

    position: absolute;
    left:50px;
}

.rightvertical {
    width:1px;
    height:410px;
    background-color:#fff;
    opacity: .55;

    position: absolute;
    right:50px;
}

.number.left
{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

.number.right
{
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}

.row.endzone{

width: 90%;
}

.row.endzone2{

width: 90%;
}

.qb{
position: absolute;
width: 50px;
height: 50px;
background-image: url('/assets/qb.png');
/*background-color: #fff;*/
left: 75px;
top: 300px;
visibility:hidden;
}

.span4.offset4{


-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 25px;
font-weight: bold;
min-height: 30px;
text-align: center; 
/*width: 100%;*/
display: inline-block;

}
.row.main{

  padding-top: 20px;
}
.span6.offset2{


-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/*font-size: 25px;*/
padding-top: 10px;
font-size: 16px;
font-weight: bold;
min-height: 30px;
text-align: center; 
/*width: 100%;*/
display: inline-block;

}

Answer 1

您似乎使用的是相对宽度大小，即 100%。而是尝试使用绝对宽度，即 500px；或者，尝试为您的容器设置宽度。

.span3.field{
    width:500px;
    background-color: rgb(96, 211, 43);
}

希望对你有帮助