代码之家 › 专栏 › 技术社区 › Gaurav Thantry

更改浏览器大小时,无法阻止文本重新定位

css html

Gaurav Thantry · 技术社区 · 7 年前

div 从调整大小。但是如何阻止div中的文本重新定位呢。下面是我的网页在调整大小前后的快照。

调整大小后:

我试着找了很多这个。尝试将我的整个身体内容放置在 部门 固定宽度。下面是我的代码:

.cardFrame{
  border: solid;
  border-radius: 5%;
  text-align: center;
  margin-left: 30%;
  margin-right: 30%;
  background-color: grey;
  margin-top: 10px;
    position: absolute;
	min-width: 539px;
	box-shadow: 0 0 80px grey;
	

	
}

#imageSize{
  height: 160px;
  width: 160px;
  align-self: center;
  margin-top: 30px;
  /*border: solid rgba(0,0,0,.5);*/
  border-width: thick;
  box-shadow: 0 0 80px black;
}
.infoContent{
  margin-top: 20px;
  position: relative;
  width: 80%;
  display: inline-block;
  border-style:hidden;
  border-radius: 5%;
  background-color: rgb(240,230,140);
    box-shadow: 0 0 80px rgba(240,230,140,.5);


}

.info{
  font-size: 20px;
  width: fixed;
  /*text-shadow: 0 0 30px rgba(0,0,0,.5); */
}

.line{
  margin-left: 5%;
  margin-right: 5%;
}
#if{
  font-size: 25px;
  text-shadow: 0 0 30px rgba(0,0,0,.5);
  
}
#fact{
  font-size: 20px;
}
#factDescription{
  font-size: 12px;
}

.listContent{
  font-style: italic;
  font-weight: bold;
  text-align: left;

  list-style-type: none;
}

#listItems{
  font-size: 30px;
  text-shadow: 0 0 30px rgba(0,0,0,.5);
}

<!DOCTYPE html>
<html>
 <head>
   <meta name="description" content="Animal Card Project">
   <meta name="Author" content="Gaurav Thantry">
   <meta name="keywords" content="html, CSS">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/stylesheet.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <title>AnimalCard</title>
 </head>
 <body>
 <div style="position: absolute, text-align: center">
   <div class="cardFrame">
     <img src="images/burfi.jpg" id="imageSize" alt="my pet's pic">
     <div class="row infoContent" text-align="center">
       <div class="col-md-6 info">
         <p>NAME:</p>
         <p>AGE:</p>
         <p>BREED:</p>
       </div>
       <div class="col-md-6 info">
        <p>Burfi</p>
        <p>2 Yrs</p>
        <p>Pug</p>
       </div>
     </div>
     <hr class="line">
     <p id="if">INTERESTING FACT</p>
     <p id="fact"><em>Pugs are ancient breed</em></p>
     <p id="factDescription">Because the pug lineage stretches so far back, their early history is a little murky. Most believe that the breed originated in China and existed before 400 BCE and were called (or at least closely related to a breed called) "lo-sze." Buddhist monks kept the dogs as pets in Tibetan monasteries.</p>
     <hr class="line">
     <p id="listItems">Things to buy for a pug</p>
     <div class="row">
       <div class="col-md-6">
        <ul class="listContent">
         <li><label>Food and Water Bowl</label></li>
         <li><label>Steam Cleaner</label></li>
         <li><label>Collar and/or Harness</label></li>
         <li><label>Baby/Dog Gate</label></li>
       </ul>
      </div>
      <div class="col-md-6">
         <ul class="listContent">
          <li><label>Walking Leash</label></li>
          <li><label>The Pug T-Shirt</label></li>
          <li><label>Deshedding Brush</label></li>
          <li><label>Treats</label></li>
         </ul>
       </div>
      </div>
      <p text-align="center">Created by @Gaurav Thantry</p>
    </div>
</div>
 </body>
</html>

2 回复 | 直到 7 年前

SidTheBeard 7 年前

您正在使用 .col-md-6 这使得它只能在中型和大型屏幕上显示两列。如果始终希望键/值并排,请尝试使用 col-xs-6 或 col-sm-6 . 您正在使用的css框架文档将提供有关网格的更多详细信息,以及它们用于在特定屏幕大小下应用特定宽度的类。

有关任何其他引导相关问题的参考, hereâs the documentation to the version youâre currently using .

Rocks 7 年前

只需更改 col-md-6 上 .info 元素到 col-6 . (这与col-xs-6相同)。这将确保所有设备都有两列,从超大屏幕到超大屏幕。
请参阅此处了解更多信息: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options