Интерактивные поля CSS в зависимости от размера браузера/экрана

01) Я пытаюсь создать строку с двумя полями содержимого. Первый будет содержать изображение и второй текст. У меня возникла проблема с тем, как сделать его интерактивным в зависимости от размера браузера и экрана.Интерактивные поля CSS в зависимости от размера браузера/экрана

Итак, я хочу, чтобы этот результат, и я хочу, чтобы реагировать/интерактивными в зависимости от размера экрана:

Это является причиной, почему я добавил: <div class="inner"></div> пытается контролировать макс размеры, но это не сработало.

HTML:

<head> 
<link rel="stylesheet" type="text/css" href="rich_text.css"> 
</head> 

<div class="inner"> 
    <div class="feature left"> 
     <span class="image"><img src="http://SITE.co.uk/images/bg3.png" alt="" /> 

     </span> 
     <div class="content"> 
      <h2>Total Facebook Image Likes</h2> 
      <p>65 </p> 
      <ul class="actions"> 
       <li><a class="button alt" href="#">LINK</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS: CSS LINK

02) Я также заметил, что мои окончательные результаты портится, если размер изображения слишком велик.

Я попытался добавить, что:

<span class="image"><img style="height:400px;max-width:400px; src="http://SITE.co.uk/images/bg3.png" alt="" />

Но изображение не загружается.

источник

2016-03-02 Apolo Radomer

Для проблемы 2: Кажется, вы забыли закрыть тег стиля. – LarsW

Если вы хотите, чтобы элементы реагировали и изменялись в зависимости от ширины экрана, вы можете использовать проценты или единицы просмотра (%, vh и vw).

Рассмотрим следующий код:

/* demo purpose only */ 
 
.row { margin-bottom:1em;} 
 
.red {background:red;} 
 
.blue {background:blue;} 
 

 
/* make all divs inside a row get 50% width */ 
 
.row div { 
 
    width:50%; 
 
    box-sizing:border-box; /* this makes sure paddings or borders don't break width calculation */ 
 
    padding: 1em; 
 
    color:#FFF; 
 
} 
 

 
/* by default, all divs have auto width, usually covering 100% of their parent tag */ 
 
.row.default div { width: auto; } 
 

 
/* floating divs to the left will make them next to each other instead of under each other */ 
 
.row.floated div { float:left; } 
 

 
/* adding overflow:auto to the parent of flaoted divs will make sure the layout does not break */ 
 
.row.floated { overflow:auto; } 
 

 
/* rows can have any width you want, the children will resize accordingly and will always be 50% of whatever width the parent has */ 
 
.row.maxwidth {max-width:400px;} 
 

 
/* we can make the children as inline-blocks instead of floating */ 
 
/* warning: space in HTML code between inline-blocks will break the layout so be careful */ 
 
.row.inline div {display:inline-block;} 
 

 
/* we can use viewport untis */ 
 
/* vw = viewport width */ 
 
/* vh = viewport height */ 
 
/* 50vw = 50% of viewport width */ 
 
.row.vw div { width: 50vw; }

<h2>1. Default Behaviour</h2> 
 
<div class="row default"> 
 
    <div class="red">default block</div> 
 
    <div class="blue">default block</div> 
 
</div> 
 

 
<h2>2. Percentage Width (based on parent)</h2> 
 
<div class="row"> 
 
    <div class="red">50% width block</div> 
 
    <div class="blue">50% width block</div> 
 
</div> 
 

 
<h2>3.1 Percentage Width + Floating</h2> 
 
<div class="row floated"> 
 
    <div class="red">50% width block - floated</div> 
 
    <div class="blue">50% width block - floated </div> 
 
</div> 
 

 
<h2>3.2 Parent with max-width of 400px</h2> 
 
<div class="row floated maxwidth"> 
 
    <div class="red">50% width block - floated</div> 
 
    <div class="blue">50% width block - floated </div> 
 
</div> 
 

 
<h2>4. Percentage Width + Inline-block</h2> 
 
<div class="row inline"> 
 
    <div class="red">50% width inline-block</div><div class="blue">50% width inline-block</div> 
 
</div> 
 

 
<h2>5. Viewport Width (based on viewport)</h2> 
 
<div class="row vw floated"> 
 
    <div class="red">50vw width block - floated</div> 
 
    <div class="blue">50vw width block - floated</div> 
 
</div>

Код довольно комментировал, чтобы помочь вам понять, как все работает, и некоторые различные способы достижения того, что вы хотите. Я бы просто рекомендовал использовать процентную ширину и плавать. В качестве альтернативы вы можете использовать мощные сетевые системы, такие как Bootstrap, у которых уже есть библиотека из 12-колоночной сетки, которую вы можете использовать, не имея необходимости писать базу данных макета.

источник

2016-03-02 17:21:36 Aziz

Отличный ответ. Я думал, что это было само решение в начале. Это отличный учебник, который поможет мне это сделать. ура –

Интерактивные поля CSS в зависимости от размера браузера/экрана

ответ

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