HTML div 调整大小问题

我有一个 div，想更改它的宽度，但它最多只能更改 1080 像素。之后就不再增加了。

我要增加 <div style="height:350px !important; width:1600px !important;" class="karne_umumi">这个 div 标签。

body {
	line-height: 1;
}



table {
	border-collapse: collapse;
	border-spacing: 0;
}


body{
    line-height:24px;
    color:#4d4d4d;
    font-size:16px;
}

img{
    border:0;
}

table{
	width:100%;
    margin-bottom:0px;
    padding:0;
    text-align:left;
	  border:1px solid #000 !important;
     font-size:1.20em !important;
}

table td{
    padding:2px;
    line-height:18px;
    vertical-align:middle;
    border-bottom:1px solid #000;
   border-right:1px solid #000; 
}

 table.karne,table.karne td {
     padding:2px 2px !important;
}

table.karne{
	border-bottom: 0px !important;
}


 .karne_umumi {
    background: #ECEEEE;
    margin-top: 10px;
    width:720px !important;
    max-width:1080px;
    height:510px !important;
    float:left;
    display:inline-block;
    margin-right: 0px !important;
     margin-left:5px;
	 border-radius:5px;
}
 div.karne_umumi img {
    border: none;
    float: left;
}

 div.karne_umumi table td img {
    border: none;
    float: none;
}

 .vereqe_basliq {
    background: #efefee;
    border-radius:8px 8px 0 0;
    padding:5px;
    margin:auto 1px;
}
 .vereqe_body {
     background: #FFFFFF;
     border-radius:0 0 8px 8px;
     padding:0px;
     margin:0 auto;
     color: #515658;
     font-size: 11px;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: normal;
     font-style: normal;
     min-height: 300px;
     max-height: 1080px;
     min-width:400px;
     max-width:100%;
     overflow:hidden;
}

.cvb {

       font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size:12px;
    color:#333333;
    background-color:#f7f7f9;
	border:1px solid #000;
	margin-left:2px;
	padding-left:1px;
	padding-right:1px;
}
.cvb1 {

       font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size:12px;
    color:#333333;
    background-color:#f7f7f9;
	border:1px solid #000;
	margin-left:2px;
	padding-left:1px;
	padding-right:1px;
	width:45px;
	display:inline-block;
}
.cvb2 {

       font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size:12px;
    color:#333333;
    background-color:#f7f7f9;
	border:1px solid #000;
	margin-left:2px;
	padding-left:1px;
	padding-right:1px;
	width:75px;
	
	display:inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    
  
 <link href="./files/karne_style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="container-fluid">

    
   <div style="height:350px !important;    width:1600px !important;" class="karne_umumi">   <div class="vereqe_basliq">
        <span style="float: left">place: 1</span>
        <span style="margin-left: 5%;">Exam 9</span>
        <span style="float: right"> Score: 40</span>
   </div>
   <div class="vereqe_body">
      <table class="karne">
         <tbody>
            <tr>
               <td style="width:120px">
				                  <div><b>name:</b> XXXXX        </div>
                  <br>
                  <div><b>surname:</b> YYYYYYYY     </div>
                  <br>
                  <div><b>father Name:</b> ZZZZZZZZ       </div>
                  <br>
                  <div><b>grade:</b> 9</div>
                  <br>
                  <div><b>School:</b> 005</div>
                  <br>
                  <div><b>District:</b> SSSSSSS</div>
                  <br>
                  <div><b>Variant:</b>  </div>
                  <br>
                  <div><b>Date:</b> 2018-11-29</div>
            
               </td>
               <td style=" padding: 2px 2px !important; border-right: 0px !important;">
			   	<div><center><img style="margin-top:-20px;" src="./files/21_logo.png" width="100"></center></div>                  <table>
                     <tbody>
                        <tr>
                           <td><b>Subjects</b></td>
                           <td><b>Answers</b></td>
                           <td><b>Correct</b></td>
                           <td><b>Wrong</b></td>
                           <td><b>Net</b></td>
                           <td><b>Score</b></td>
                           <td><b>SUM</b></td>
                        </tr>
                   
                  
               <tr>
                           <td>Math</td><td><img src="./files/key.png"><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">D</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">E</span><span class="cvb">D</span><span class="cvb">A</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">B</span><span class="cvb">D</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">D</span><span class="cvb">C</span><span class="cvb1">42    </span><span class="cvb1">361   </span><span class="cvb1">54    </span><span class="cvb1">27    </span><span class="cvb2">   D ,    E,A    </span><span class="cvb1">120   </span><span class="cvb1">480   </span><span class="cvb1">0.6   </span><br><img src="./files/stu.png"><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">D</span><span class="cvb">E</span><span class="cvb">D</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">B</span><span class="cvb">E</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">&nbsp;</span><span class="cvb">C</span><span class="cvb">E</span><span class="cvb">&nbsp;</span><span class="cvb">E</span><span class="cvb1">22.5  </span><span class="cvb1">140   </span><span class="cvb1">&nbsp;</span><span class="cvb1">200   </span><span class="cvb2">ABCDE,ABCDE,ABCDE</span><span class="cvb1">40    </span><span class="cvb1">132   </span><span class="cvb1">&nbsp;</span></td><td style="background:#dddddd;">10</td><td>20</td><td style="background:#dddddd;">0</td><td>0</td><td rowspan="3">0</td> </tr> 
               </tbody>
                  </table>
               </td>
            </tr>
         </tbody>
      </table>
	 <div style="float:left;"> 
	 <div style="margin-left:10px; display:inline-block;">
		<img style="padding-top:4px" src="./files/key.png"> Correct answers
	</div>
	<div style="margin-left:10px; display:inline-block;">
		<img style="padding-top:4px" src="./files/stu.png"> Wrong answers
	</div>
	
	</div>
   </div>
</div>
</div>
</body></html>

这是给学生的答题卡。我希望所有正确答案和学生答案都在一行中。但正如所见，正确答案和学生答案的最后两个答案都下降了。

最佳答案

是的。我想这就是你想要的。

body {
	line-height: 1;
}



table {
	border-collapse: collapse;
	border-spacing: 0;
}


body{
    line-height:24px;
    color:#4d4d4d;
    font-size:16px;
}

img{
    border:0;
}

table{
	width:100%;
    margin-bottom:0px;
    padding:0;
    text-align:left;
	  border:1px solid #000 !important;
     font-size:1.20em !important;
}

table td{
    padding:2px;
    line-height:18px;
    vertical-align:middle;
    border-bottom:1px solid #000;
   border-right:1px solid #000; 
}

 table.karne,table.karne td {
     padding:2px 2px !important;
}

table.karne{
	border-bottom: 0px !important;
}


 .karne_umumi {
    background: #ECEEEE;
    margin-top: 10px;
    width:720px !important;
    max-width:1080px;
    height:510px !important;
    float:left;
    display:inline-block;
    margin-right: 0px !important;
     margin-left:5px;
	 border-radius:5px;
}
 div.karne_umumi img {
    border: none;
    float: left;
}

 div.karne_umumi table td img {
    border: none;
    float: none;
}

 .vereqe_basliq {
    background: #efefee;
    border-radius:8px 8px 0 0;
    padding:5px;
    margin:auto 1px;
}
 .vereqe_body {
     background: #FFFFFF;
     border-radius:0 0 8px 8px;
     padding:0px;
     margin:0 auto;
     color: #515658;
     font-size: 11px;
     font-family: Arial, Helvetica, sans-serif;
     font-weight: normal;
     font-style: normal;
     min-height: 300px;
     max-height: 1080px;
     min-width:400px;
     max-width:100%;
     overflow:hidden;
}

.cvb {

       font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size:12px;
    color:#333333;
    background-color:#f7f7f9;
	border:1px solid #000;
	margin-left:2px;
	padding-left:1px;
	padding-right:1px;
}
.cvb1 {

       font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size:12px;
    color:#333333;
    background-color:#f7f7f9;
	border:1px solid #000;
	margin-left:2px;
	padding-left:1px;
	padding-right:1px;
	width:45px;
	display:inline-block;
}
.cvb2 {

       font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size:12px;
    color:#333333;
    background-color:#f7f7f9;
	border:1px solid #000;
	margin-left:2px;
	padding-left:1px;
	padding-right:1px;
	width:75px;
	
	display:inline-block;
}

.flex {
  display:flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    
  
 <link href="./files/karne_style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="container-fluid">

    
   <div style="height:350px !important;    width:1600px !important;" class="karne_umumi">   <div class="vereqe_basliq">
        <span style="float: left">place: 1</span>
        <span style="margin-left: 5%;">Exam 9</span>
        <span style="float: right"> Score: 40</span>
   </div>
   <div class="vereqe_body">
      <table class="karne">
         <tbody>
            <tr>
               <td style="width:120px">
				                  <div><b>name:</b> XXXXX        </div>
                  <br>
                  <div><b>surname:</b> YYYYYYYY     </div>
                  <br>
                  <div><b>father Name:</b> ZZZZZZZZ       </div>
                  <br>
                  <div><b>grade:</b> 9</div>
                  <br>
                  <div><b>School:</b> 005</div>
                  <br>
                  <div><b>District:</b> SSSSSSS</div>
                  <br>
                  <div><b>Variant:</b>  </div>
                  <br>
                  <div><b>Date:</b> 2018-11-29</div>
            
               </td>
               <td style=" padding: 2px 2px !important; border-right: 0px !important;">
			   	<div><center><img style="margin-top:-20px;" src="./files/21_logo.png" width="100"></center></div>                  <table>
                     <tbody>
                        <tr>
                           <td><b>Subjects</b></td>
                           <td><b>Answers</b></td>
                           <td><b>Correct</b></td>
                           <td><b>Wrong</b></td>
                           <td><b>Net</b></td>
                           <td><b>Score</b></td>
                           <td><b>SUM</b></td>
                        </tr>
                   
                  
               <tr>
                           <td>Math</td><td><img src="./files/key.png"><div class="flex"><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">D</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">E</span><span class="cvb">D</span><span class="cvb">A</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">B</span><span class="cvb">D</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">D</span><span class="cvb">C</span><span class="cvb1">42    </span><span class="cvb1">361   </span><span class="cvb1">54    </span><span class="cvb1">27    </span><span class="cvb2">   D ,    E,A    </span><span class="cvb1">120   </span><span class="cvb1">480   </span><span class="cvb1">0.6   </span></div><br><img src="./files/stu.png">
                 <div class="flex"><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">D</span><span class="cvb">E</span><span class="cvb">D</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">B</span><span class="cvb">E</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">&nbsp;</span><span class="cvb">C</span><span class="cvb">E</span><span class="cvb">&nbsp;</span><span class="cvb">E</span><span class="cvb1">22.5  </span><span class="cvb1">140   </span><span class="cvb1">&nbsp;</span><span class="cvb1">200   </span><span class="cvb2">ABCDE,ABCDE,ABCDE</span><span class="cvb1">40    </span><span class="cvb1">132   </span><span class="cvb1">&nbsp;</span>
                   </div>
                   </td><td style="background:#dddddd;">10</td><td>20</td><td style="background:#dddddd;">0</td><td>0</td><td rowspan="3">0</td> </tr> 
               </tbody>
                  </table>
               </td>
            </tr>
         </tbody>
      </table>
	 <div style="float:left;"> 
	 <div style="margin-left:10px; display:inline-block;">
		<img style="padding-top:4px" src="./files/key.png"> Correct answers
	</div>
	<div style="margin-left:10px; display:inline-block;">
		<img style="padding-top:4px" src="./files/stu.png"> Wrong answers
	</div>
	
	</div>
   </div>
</div>
</div>
</body></html>

关于HTML div 调整大小问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53580468/

HTML div 调整大小问题

上一篇：javascript - 调整大小时，jQuery 滑动切换动画使其他元素跳动

下一篇：css - Codepen 上的 ASCII 艺术并不总是显示下划线