php - 使用 div 创建动态框

Question

我无法将此代码转换为动态代码。如何调整 div 的宽度，使其动态调整。当我们使用任何设备(如移动桌面平板电脑或任何其他设备)时，它应该显示相同。当我们调整它的大小时，它不会改变外观。我使用百分比调整了宽度，但它无法正常工作。

<div class="bubble1" style="background: rgb(255, 255, 255); border-radius: 
    10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px; clear: both; font-family: 
    Arial, Helvetica, sans-serif; font-size: 12px; margin: 10px auto; position: 
    relative; width: 650px; z-index: 9;">

  <div class="rectangle" style="background: rgb(127, 157, 185); box-shadow: 
    rgba(0, 0, 0, 0.55) 0px 0px 4px; float: left; height: 50px; left: -15px; 
    position: relative; top: 30px; width: 680px; z-index: 10;">
    <h2 style="color: white; font-size: 30px; font-style: italic; font- 
       weight: 
       normal; line-height: 1.2em; margin: 0px 0px 20px; padding: 6px 0px 0px; 
       text-align: center; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;">
      abash</h2>
  </div>

  <div class="triangle-l" style="border-color: transparent rgb(125, 144, 163) 
    transparent transparent; border-style: solid; border-width: 15px; height: 
    0px; left: -30px; position: relative; top: 65px; width: 0px; z-index: -1;">
  </div>

  <div class="triangle-r" style="border-color: transparent transparent 
    transparent rgb(125, 144, 163); border-style: solid; border-width: 15px; 
    height: 0px; left: 650px; position: relative; top: 35px; width: 0px; z- 
    index: -1;">
  </div>

  <div class="info" style="color: #999999; padding: 60px 25px 35px;">
    <div id="inf303">
      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Meaning</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        शर्मिंदा करना, Cause to feel embarrassed</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Key</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        बेशर्म</div>
      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Link</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        बेशर्म लोगों की खुद की तो इज्ज़त होती नहीं और दूसरों को शर्मिंदा करते रहते हैं.</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Synonyms</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        Embarrass, shame, disconcert, confound, awe</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Usage</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        she was not&nbsp;<span style="background-attachment: initial; background- 
    clip: initial; background-image: initial; background-origin: initial; 
    background-position: initial; background-repeat: initial; background-size: 
    initial; border: none; color: #333333; padding: 0px 
    2px;">abashed</span>&nbsp;at being caught</div>
    </div>
  </div>
</div>

Answer 1

对 HTML 中的所有内容进行内联样式不是一个好习惯。

您可以使用低于 680px 屏幕尺寸的 media-query，您的 div 将占据容器的整个宽度。

.bubble1 {
  width: 650px;
}

.rectangle {
  width: 680px;
}

.triangle-r {
  left: 650px;
}

@media only screen and (max-width: 680px) {
  .bubble1 {
    width: 100%;
  }
  .rectangle {
    width: 110%;
  }
  .triangle-r {
    left: 100%;
  }
}

<div class="bubble1" style="background: rgb(255, 255, 255); border-radius: 
    10px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px; clear: both; font-family: 
    Arial, Helvetica, sans-serif; font-size: 12px; margin: 10px auto; position: 
    relative; z-index: 9;">

  <div class="rectangle" style="background: rgb(127, 157, 185); box-shadow: 
    rgba(0, 0, 0, 0.55) 0px 0px 4px; float: left; height: 50px; left: -15px; 
    position: relative; top: 30px;  z-index: 10;">
    <h2 style="color: white; font-size: 30px; font-style: italic; font- 
       weight: 
       normal; line-height: 1.2em; margin: 0px 0px 20px; padding: 6px 0px 0px; 
       text-align: center; text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px;">
      abash</h2>
  </div>

  <div class="triangle-l" style="border-color: transparent rgb(125, 144, 163) 
    transparent transparent; border-style: solid; border-width: 15px; height: 
    0px; left: -30px; position: relative; top: 65px; width: 0px; z-index: -1;">
  </div>

  <div class="triangle-r" style="border-color: transparent transparent 
    transparent rgb(125, 144, 163); border-style: solid; border-width: 15px; 
    height: 0px;  position: relative; top: 35px; width: 0px; z- 
    index: -1;">
  </div>

  <div class="info" style="color: #999999; padding: 60px 25px 35px;">
    <div id="inf303">
      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Meaning</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        शर्मिंदा करना, Cause to feel embarrassed</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Key</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        बेशर्म</div>
      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Link</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        बेशर्म लोगों की खुद की तो इज्ज़त होती नहीं और दूसरों को शर्मिंदा करते रहते हैं.</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Synonyms</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        Embarrass, shame, disconcert, confound, awe</div>

      <div class="val" style="background: url(&quot;/newindex/grad.png&quot;) no- 
    repeat rgb(236, 242, 245); font-size: 16px; font-weight: 1000; height: 20px; 
    padding: 5px; width: 480px;">
        <strong>Usage</strong></div>

      <div class="val1" style="font-size: 16px; margin-bottom: 10px;">
        she was not&nbsp;<span style="background-attachment: initial; background- 
    clip: initial; background-image: initial; background-origin: initial; 
    background-position: initial; background-repeat: initial; background-size: 
    initial; border: none; color: #333333; padding: 0px 
    2px;">abashed</span>&nbsp;at being caught</div>
    </div>
  </div>
</div>