Working JSFiddle

Question

我曾经得到过一次帮助，我希望在将元素保持在同一个位置或调整大小方面提供更多帮助，但要调整到窗口视口大小，以便在平板电脑，移动设备或不同显示器尺寸上看起来仍然相同。

这是我的HTML：

<head>
<link rel="stylesheet" type="text/css"  href="file://C:/Users/cody/Desktop/offline_website/CSS/care.css">

</head> 










<body>



  <div class = "mainthing">





           <div class = "pilli">

             <img class="pillipic" src="file://C:/Users/cody/Desktop/offline_website/Images/pilli.jpg">

<h1> Suja Pilli MD. </h1>


            <pre>

Education:     
2008-2011                     
           Valley Baptist Family Practice
           Residency Program
           Harlingen, TX
           Family Practice

1993-1999
          Universitatea Ovidius
          Consatanta, Romania
          Doctor of Medicine, September 1999

Medical Licensure and Certification:
         Texas Medical Board

            </pre>



</div>













            <div class="shaun">
              <img class="shaunpic" src="file://C:/Users/cody/Desktop/offline_website/Images/shaun.jpg">



<h1> Shaun Adams FNP. </h1>
   <pre>
Education:     
2012-2014 

         Univesrity Texas Medical Branch
         Galveston, TX
         Masters of Science in Nursing

2010-2011

         Univesrity of Texas Brownsville
         Brownsville, TX
         Bachelors of Science in Nursing.

2005-2007

        University of Texas Brownsville
        Brownsville, TX
        Associates Degree in Nursing

Medical Licensures and Certification:

        Texas Medical Board of Nursing Family
        Nurse Practioner Certified License
        Nurge Register Nurse License
        BLS, ACLS, TNCC, ENPC
</pre>



            </div>
 </div>


</body>

这是我的CSS：

/* .body
{
    margin-top: 20vh;
    margin-left: 20vw;
    margin-bottom: 20vh;
    margin-right: 20vw;
    width: 960px;
    position: relative;

}
 */

.mainthing {
    margin-top: 20vh;
    margin-left: 20vw;
    margin-bottom: 20vh;
    margin-right: 20vw;
    max-width: 100%;
    text-align: center;
    /* position: absolute; */ 
}
.pilli {
    /* ADDED THIS */
    width: 50%;
    float: left;
    display: inline-block;
    position: relative;


}
.pillipic {
    max-width: 100%;
    height: auto;
    float: left;

}
.shaun {
    /* ADDED THIS */
    width: 50%;
    float: left;
    display: inline-block;


}
.shaunpic {
    max-width: 100%;
    height: auto;
    float: left;


}


pre
 {  
   text-align:  left;
   font-family: "courier new", courier, monospace;
   font-size: 11px;
   float: left;


}

所以我的主要问题是文字显示在图像旁边的正确位置，但是当我添加另一条线时，当我希望它在图片旁边保持垂直时，它会向左移动。

我遇到的另一个问题是调整所有元素的大小。

我尝试使用body标签创建一个包装器，但我并不真正了解包装器如何根据像素宽度工作。我也尝试使身体具有相对位置，其所有子div的绝对位置，但是，这也不起作用。

Answer 1

Working JSFiddle

您要找的是fluid layout。

阻碍此问题的主要方法是使用<pre>标记进行常规格式设置，以便使用不同的浏览器尺寸进行查看。

我将教育年限放在div内，其CSS类.title对应于此CSS：

.title {
  text-align: left;
}

然后我将教育内容放在div内，其CSS类为.content，这样可以保证所有内容缩进20％。

.content CSS：

.content {
  margin-left: 20%;
  text-align: left;
  /* Optional .content styles */
  line-height: 1.5;
  font-family: Consolas, monospace;
}

完整CSS

.mainthing {
  margin-top: 20vh;
  margin-left: 20vw;
  margin-bottom: 20vh;
  margin-right: 20vw;
  max-width: 100%;
  text-align: center;
  /* position: absolute; */
}

.pilli {
  /* ADDED THIS */
  width: 50%;
  float: left;
  display: inline-block;
  position: relative;
}

.pillipic {
  max-width: 100%;
  height: auto;
  float: left;
}

.shaun {
  /* ADDED THIS */
  width: 50%;
  float: left;
  display: inline-block;
}

.shaunpic {
  max-width: 100%;
  height: auto;
  float: left;
}

pre {
  text-align: left;
  font-family: "courier new", courier, monospace;
  font-size: 11px;
  float: left;
}


/* New Stuff */

body {
  font-size: 11px;
}

h2 {
  /* Options h2 styles */
  font-family: Consolas, monospace;
  font-size: 11px;
  text-align: left;
  font-weight: normal;
  font-family: Consolas, monospace;
}

.title {
  text-align: left;
  font-family: Consolas, monospace;
}

.content {
  margin-left: 20%;
  text-align: left;
  /* Optional .content styles */
  line-height: 1.5;
  font-family: Consolas, monospace;
}

完整的HTML

<div class="mainthing">
  <div class="pilli">
    <img class="pillipic" src="http://i.imgur.com/alhBkw5.png">
    <h1> Suja Pilli MD. </h1>
    <h2>Education:</h2>
    <div class="title">
      2008-2011
    </div>
    <div class="content">
      Valley Baptist Family Practice Residency Program Harlingen, TX Family Practice
    </div>
    <div class="title">
      1993-1999
    </div>
    <div class="content">
      Universitatea Ovidius Consatanta, Romania Doctor of Medicine, September 1999
    </div>
    <div class="title">
      Medical Licensure and Certification:
    </div>
    <div class="content">
      Texas Medical Board
    </div>
  </div>
  <div class="shaun">
    <img class="shaunpic" src="http://i.imgur.com/alhBkw5.png">
    <h1> Shaun Adams FNP. </h1>
    <h2>
      Education:
    </h2>
    <div class="title">
      2012-2014
    </div>
    <div class="content">
      Univesrity Texas Medical Branch Galveston, TX Masters of Science in Nursing
    </div>
    <div class="title">
      2010-2011
    </div>
    <div class="content">
      Univesrity of Texas Brownsville Brownsville, TX Bachelors of Science in Nursing.
    </div>
    <div class="title">
      2005-2007
    </div>
    <div class="content">
      University of Texas Brownsville Brownsville, TX Associates Degree in Nursing Medical Licensures and Certification: Texas Medical Board of Nursing Family Nurse Practioner Certified License Nurge Register Nurse License BLS, ACLS, TNCC, ENPC
    </div>
  </div>
</div>

Answer 2

正如您在代码段中看到的那样，我简化了CSS并将其转换为FLEXBOX。如果这不是你想要的，那就很酷。您的HTML未更改，但现在已完全响应。

在较小的屏幕上（最大720px见@media查询），C.V。显示在下面。

我添加了一些空的CSS规则和演示代码，展示了您可以使用现有的HTML代码做什么。

请参阅代码段中的评论以获取解释。

（最终@media应该阅读.card { width: calc(50% - 8px) }以满足您的要求。现在只有35%来显示Flexbox行为）

进行有趣的测试和摆弄...

＆＃13;

/* * { outline: 1px dashed red } /* for debugging remove beginning slash */

#main { /* main card holding container */
    display: flex;              /* make it a flex container */
    flex-flow: row wrap;        /* main contents are 2 columns inside a row */
    justify-content: center;    /* position cards with margins on either side */
    max-width: 90%;             /* only 90% of body width */ 
    margin: 10% auto;           /* 5% top margin, main centered in body */
}
.card { /* main definition of a c.v. card */
    display: flex;              /* make it a flex container */
    flex-flow: column nowrap;   /* card contents are rows inside a column */
    align-items: center;        /* center card contents */ 
    width: calc(100% - 8px);    /* full width of main, mobile first */
    margin: 4px;                /* some space outside cards */
    padding: 4px;               /* some inside space */
    background-color: #fafafa;  /* off white demo color */
    box-shadow: 0px 4px 9px rgba(42, 47, 57, 0.2);
}
.card *   { /* add your general rules for anything inside card    */ }
.card > * { /* add your general rules for direct children of card */ }
.card h1  { /* exceptions for a H1 */ }
.card img { /* exceptions for an IMG */
              max-width: 33%;   /* some max/min image width */
              min-width: 165px;
}
.card pre { /* exceptions for a PRE */
              padding: 4px;
              font-size: 11px;
              font-family: "courier new", courier, monospace;
}
@media all and (min-width: 721px) {
    .card { width: calc(35% - 8px) }    /* moves cards side by side on larger screens */
}

＆＃13;

    <div id="main">
        <div class="card">
            <img src="http://placehold.it/500">
            <!-- img src="file://C:/Users/cody/Desktop/offline_website/Images/pilli.jpg" -->
            <h1>Suja Pilli MD.</h1>
<pre>

Education:     
2008-2011                     
           Valley Baptist Family Practice
           Residency Program
           Harlingen, TX
           Family Practice

1993-1999
          Universitatea Ovidius
          Consatanta, Romania
          Doctor of Medicine, September 1999

Medical Licensure and Certification:
         Texas Medical Board

            </pre>
        </div>
 
       <div class="card">
            <img src="http://placehold.it/500">
            <!-- img src="file://C:/Users/cody/Desktop/offline_website/Images/shaun.jpg" -->
            <h1>Shaun Adams FNP.</h1>
            <pre>
Education:     
2012-2014 

         Univesrity Texas Medical Branch
         Galveston, TX
         Masters of Science in Nursing

2010-2011

         Univesrity of Texas Brownsville
         Brownsville, TX
         Bachelors of Science in Nursing.

2005-2007

        University of Texas Brownsville
        Brownsville, TX
        Associates Degree in Nursing

Medical Licensures and Certification:

        Texas Medical Board of Nursing Family
        Nurse Practioner Certified License
        Nurge Register Nurse License
        BLS, ACLS, TNCC, ENPC
</pre>
        </div>
    </div>

＆＃13;

保持div对齐，并

2 个答案:

Working JSFiddle

完整CSS

完整的HTML