调整所有DIV内容的大小

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了调整所有DIV内容的大小相关的知识，希望对你有一定的参考价值。

我用html / CSS创建了这个面板，我想做点什么。当一个人使用平板电脑时，整个内容会像图像一样调整大小（“宽度：100％”）。我想调整图像和文字的大小。

我究竟做错了什么？通过这种方式，文本和图像保持在彼此之上。

JSfiddle LINK：https://jsfiddle.net/z5ygfx3n/8/

有一个div元素内容的示例：

<div class="bloco-dolar-americano" style="position: absolute; left: 25%; top: 4%; width: 379px; height: 243px; background: NONE; display: block;">ALL CONTENT</div>

谢谢

答案

首先，你需要阅读有关media query的信息。

我有一个创建片段，请参阅如何使用组类[class*=bloco-dolar-]

希望这有帮助。

让我知道进一步的澄清。

注意：我在媒体查询max-991和min-768中制作了css，所以请检查这个尺寸。

  @media only screen and (min-width: 768px) and (max-width: 991px){
    .cotacao-responsiva{
  color: white;
  font-family: arial;


  font-size: 18px;
}

body{
  background: black;
  
}


div[class*=bloco-dolar-] {
    position: unset !important;
    width: 100% !important;
    max-width: 320px;
    margin-bottom: 3%;
    text-align: center;
    display: inline-block !important;
    height: auto !important;
    margin-bottom: 50px;
}
div[class*=bloco-dolar-] .cotacao-pais {
    width: 100%;
    clear: both;
}
div[class*=bloco-dolar-] .cotacao-pais img {
    width: 100%;
    height: auto;
        margin: 0 !important;
}
div[class*=bloco-dolar-] .cotacao-texto {
    width: 100%;
    float: left;
    clear: both;
}
div[class*=bloco-dolar-] .cotacao-texto br {
    display: none;
}
.cotacao-responsiva{text-align: center;}
}
<div class="cotacao-responsiva" style="position: relative; width:100%; height: 1000px; background: none;">

<div class="bloco-dolar-americano" style="position: absolute; left: 25%; top: 4%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left;le "><div style="margin-bottom:5px"><b>DOLAR AMERICANO</b></div><br/><img width= "80%" class="aligncenter size-full" style="margin-left: 12px" src="http://www.axbrcambio.com.br/baloes/balao-eua.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>

 <div class="bloco-dolar-americano" style="position: absolute; left: 55%; top: 4%;width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>EURO</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-euro.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 5%; top: 15%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR CANADENSE</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-canadai.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 23%; top: 38%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>LIBRA</b></div><br/><img width= "80%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-libra.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 40%; top: 30%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR AUSTRALIANO</b></div><br/><img style="margin-left:30px" width= "50%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-aus.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 63%; top: 30%; width: 379px; height: 243px; background: NONE; display: block;">

<div class="cotacao-pais" style="float:left; "><div style="margin-bottom:5px"><b>DOLAR NEOZEOLANDÊS</b></div><br/><img style="margin-left: 50px" width= "50%" class="aligncenter size-full" src="http://www.axbrcambio.com.br/baloes/balao-dolar-neo.png"  /></div>


<div class="cotacao-texto"><br/><br/><br/><br/><br/>
 <span style="color: green;"><img width="5%" src="http://www.axbrcambio.com.br/baloes/seta-baixo-verde.png" style="margin-right: 3px" />COMPRA</span> 4,08<br/><span style="color: red;"><img style="margin-right: 3px" src="http://www.axbrcambio.com.br/baloes/seta-cima-vermelha.png"  />VENDA</span> 4,32
 </div>
 
 
 </div>
 
 <div style="clear:both"></div>
 
 <div class="bloco-dolar-americano" style="position: absolute; left: 43%; top: 56%; width: 379px; height: 243px; ba
以上是关于调整所有DIV内容的大小的主要内容，如果未能解决你的问题，请参考以下文章
 

 根据内容大小动画和调整 div 动态高度


 自动调整 div 的大小


 css有用的代码片段


 根据寡妇大小调整内容 div 的大小，其余元素将保持不变


 调整div大小时如何保持用户的滚动位置


 如何根据其内容调整UIStackView的大小？