交互式 CSS 框取决于 browser/screen 大小

Question

01) 我正在尝试创建包含两个内容框的行。第一个将包含图像，第二个将包含文本。我在如何根据浏览器和屏幕大小使其具有交互性方面遇到问题。

所以，我想要这个结果，我希望它 responsive/interactive 取决于屏幕尺寸：

这就是我添加的原因：<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="" />

但是图片加载不出来。

Answer 1

如果您想让元素响应并根据屏幕宽度进行更改，那么您可以使用百分比或视口单位（%、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 列网格库，您可以使用它而无需编写自定义布局网格基础。

交互式 CSS 框取决于 browser/screen 大小

Interactive CSS boxes depending on browser/screen size

html

css

size

interactive