Question

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="" />

但图片无法加载。

Answer 1

如果您希望元素具有响应能力并根据屏幕宽度进行更改，则可以使用百分比或视口单位（UIBarButtonItem，%和vh）。

请考虑以下代码：

＆＃13;

vw

＆＃13;

/* 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; }

＆＃13;

代码非常有用，可以帮助您了解一切是如何运作的，以及实现您想要的各种方法。我只是建议使用百分比宽度并浮动它们。或者，您可以使用强大的网格系统，如Bootstrap，它已经有一个12列网格库，您可以使用它而无需编写自定义布局网格基础。

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

1 个答案: