HTML CSS design: div, растущий в размере

Следуя инструкциям, приведенным в другом вопросе, я переписал веб-страницу, используемую для печати pdf и отображаемую в Интернете. Вот код:HTML CSS design: div, растущий в размере

/** CSS File **/ 
body { 
    background-color: lightcyan; 
    border: 1px solid black; 
    font-family: sans-serif; 
    height: 268mm; 
    margin-bottom: 13mm; 
    margin-left: 11mm; 
    margin-right: 12mm; 
    margin-top: 10mm; 
    width: 187mm; 
} 
img { 
    margin: 0mm; 
    padding: 0mm; 
    max-height: 100%; 
    max-width: 100%; 
} 
div.ClrOvFlw, div.Pedice { 
    clear: both; 
    overflow: auto; 
} 
div.Left, div.Left75 { 
    clear: left; 
    float: left; 
} 
div.Right, div.Right25 { 
    clear: right; 
    float: right; 
} 
div.Left75 { 
    background-color: yellow; 
    height: 20.74mm; 
    margin-right: 1mm; 
    padding: 0mm; 
    width: 129mm; 
} 
div.Right25 { 
    background-color: blue; 
    height: 20.74mm; 
    margin-left: 1mm; 
    padding: 0mm; 
    width: 51mm; 
} 

<!-- HTML --> 
<body> 
    <div class="ClrOvFlw"> 
     <div class="Left75"> 
      <img id="Logo" src="../Box Logo Testata/Logo.jpg" alt="Mark"> 
     </div> 
     <div class="Right25"> 
      <div id="Bandiera"> 
       <img id="BandieraImg" src="" alt="ITA"> 
      </div> 
      <div id="MadeInItaly"> 
       MADE IN ITALY 
      </div> 
     </div> 
    </div> 
</body>

Как вы можете видеть, я рассчитал размеры на данном шаблоне. Если я не ставил srcs в тегах img, все в порядке, но когда я их вставляю, Right25 div течет по другой строке, потому что Left75 div становится больше. Вот вам link для скрипки.

Что мне не хватает?

EDIT Вот изображение, которое вы запросили.

источник

2016-01-07 IssamTP

Каков размер логотипа? –

Почему вы ожидаете '.ClrOvFlw' иметь' 129 + 1 + 1 + 51' мм 'width'? – Trix

@ stig-js 71.97x20.74mm (gimp). – IssamTP

Проблема заключается не в том, что левый элемент увеличивается в размере, а в том, что правый элемент вставляется с правой стороны экрана. Зачем? потому что css создает пространство для полосы прокрутки, а ваши значения ширины - фиксированной длины.

Это причиняются overflow: auto CSS применяется к div.ClrOvFlw здесь:

div.ClrOvFlw, div.Pedice { 
clear: both; 
overflow: auto; 
}

По какой-то причине, когда вы добавляете изображение в ИПВ, CSS ожидает, что требование о скроллинга - Не может скажем точно, но я бы предположил, что это связано с размером изображения до того, как применяются ограничения, на которые он вставляется. Если разрешение изображения достаточно велико, чтобы - если бы он не уменьшался, чтобы вписаться в div - для этого потребовалось бы переполнение. Вы можете проверить это, поместив изображение, которое, естественно, маленькое, как src, например, http://www.w3schools.com/tags/smiley.gif. Обратите внимание, что divs соответствуют ожидаемому, когда это ваш источник.

Ваше решение либо удаляет overflow: auto из div ClrOvFlw, либо изменяет размер исходного изображения так, чтобы его естественное разрешение было достаточно маленьким, чтобы оно соответствовало заданной высоте содержащего div.

Примечание: материал с фиксированной длиной является проблемой, поскольку контейнеры не могут реагировать на уменьшенное пространство - 25% от содержащего div больше не 51 мм. Вместо этого вы можете попробовать использовать% width, если это опция - это может также облегчить проблему, не переделав изображение.

источник

2016-01-07 11:45:38

Проблема была переполнена: auto. Я не могу изменять размеры изображений, потому что в финальной версии я не буду иметь никакого контроля над изображениями или тем, что он придет позже. Я использовал% в веб-версии, и все в порядке. – IssamTP

HTML CSS design: div, растущий в размере

ответ

Смежные вопросы