取决于浏览器/屏幕大小的交互式 CSS 框答案

【问题标题】：Interactive CSS boxes depending on browser/screen size取决于浏览器/屏幕大小的交互式 CSS 框
【发布时间】：2016-03-02 16:32:33
【问题描述】：

01) 我正在尝试用两个内容框创建一行。第一个将包含图像，第二个将包含文本。我在如何根据浏览器和屏幕尺寸使其交互时遇到问题。

所以，我希望得到这个结果，并且我希望它根据屏幕尺寸具有响应性/交互性：

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

但图片无法加载。

【问题讨论】：

问题2：好像忘记关闭style标签了。

标签： html css size interactive

【解决方案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 列网格库，您可以使用它而无需编写自定义布局网格基础。

【讨论】：

很好的答案。一开始我认为这是解决方案本身。这是一个完美的教程来帮助我做到这一点。干杯