Создайте динамическое окно, используя div - PullRequest
Новая
       1

Создайте динамическое окно, используя div

0 голосов
/ 04 мая 2018

Я не могу преобразовать этот код в динамический. как настроить ширину 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>

Ответы [ 4 ]

0 голосов
/ 04 мая 2018

Не очень хорошая практика вставлять все элементы в ваш HTML.

Вы можете использовать media-query с размером экрана ниже 680px, ваш 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>
0 голосов
/ 04 мая 2018

Вы можете попытаться установить ширину div, используя единицу vw. vw устанавливает ширину элемента относительно ширины области просмотра . Theres также vh для высота области просмотра .

Пример: 

width = 50vw;

Устанавливает ширину элемента равной 50% ширины области просмотра. Следовательно, ширина вашего div будет динамически установлена, чтобы соответствовать разным размерам экрана.

0 голосов
/ 04 мая 2018

Чтобы сделать страницу отзывчивой с помощью css, вы можете использовать @media only screen property. Медиа-запросы позволяют изменять стиль элемента, который вы предпочитаете для разных устройств и размеров экрана: 

@media only screen and (max-width: 400px) //Only apply the following styles for screen sizes than do not exceed a maximum width of 400px. 
  {
       div 
        {
           //Add styles here for all div elements, to be applied only on screen sizes less than 400px wide.
         }

       body 
        {
          //Add styles here for the document body, to be applied only on screen sizes less than 400px wide.
         }
   }

Div и стиль кузова будут применяться только на экранах шириной менее 400 пикселей.

Вы можете задать столько медиазапросов, сколько хотите, чтобы ваш сайт реагировал на все устройства.

0 голосов
/ 04 мая 2018 
<div style="border: 1px solid red; padding: 15px; min-width:100px; display: inline-block height: fit-content">
    test text
</div>

Попробуйте это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...