Question

在我的网站上，我有两张图片每页100像素。在它们下面，我的文本在页面的每一侧都有100个像素。当互联网窗口很小时，它看起来很棒。它看起来像这样：Website Ideal

但是当我把窗户放大时，它看起来像这样：Website Problem

关于如何解决此问题的任何想法？

CSS：

.LG
{
    width: 20%;

}
#Garrett  {
    margin-left: 100px;
    float:left
}

#Luke {
    margin-right: 100px;
    float: right
}
#gname {
    margin-left: 100px;
    margin-top:auto;
    float: left;
    font-family: Futura
}
#lname {
   float: right; 
    margin-right:100px;
    margin-top: auto;
    font-family: Futura
}

HTML：

   <img id=Garrett class=LG src="Screen%20Shot%202016-05-06%20at%204.58.49%20PM.png"/>
    <img id=Luke class=LG src="Screen%20Shot%202016-05-06%20at%205.01.11%20PM.png"/>
    <h4 id=gname>Garrett O'Connor</h4>
    <h4 id=lname>Luke Eder</h4>

由于

Answer 1

float: left和float: right用于允许内容环绕浮动元素。当屏幕较宽时会出现问题，因为＃{1}}标签旁边的#Garrett和#Luke标签有float空间。

因此，正如Marcos建议的那样，解决方案是将每组内容包装成img，如下所示：

div

然后，您可以将CSS添加到容器<div class="left-box"> <img id=Garrett class=LG src="Screen%20Shot%202016-05-06%20at%204.58.49%20PM.png"/> <h4 id=gname>Garrett O'Connor</h4> </div> <div class="right-box"> <img id=Luke class=LG src="Screen%20Shot%202016-05-06%20at%205.01.11%20PM.png"/> <h4 id=lname>Luke Eder</h4> </div>标记中，而不是添加到每个单独的元素：

div

P.S。使用figure和figcaption（由@ C14L建议）将是包含内容的首选方法，因为它是语义的。有关详细信息，请参阅此处http://html5doctor.com/the-figure-figcaption-elements/

Answer 2

实际上，对于这种情况，实际上有HTML标签：<figure>和<figcaption>。

<figure class="one-pic">
  <img src="picture.png" alt="An awesome picture">  
  <figcaption>Foo Bar</figcaption>
</figure>

然后，您可以将分组元素（图片加上标题）浮动到视图屏幕的一侧。

.one-pic {
  float: left;
  margin-left: 100px;
}

请参阅Mozilla docs here。

Answer 3

我为您设计了一个小代码。

这会帮助你。

<div class="all-set"><p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
<ul><li class="left-box">
    <img id=Garrett class=LG src="http://gravatar.com/avatar/db85661fa6a6e059df0f053ce6cade50?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-94696e1c3870f64217a8040eedd4a1ed.png"/>
    <h4 id=gname>Garrett O'Connor</h4>
</li>

<li class="right-box">
    <img id=Luke class=LG src="http://gravatar.com/avatar/db85661fa6a6e059df0f053ce6cade50?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-94696e1c3870f64217a8040eedd4a1ed.png"/>
    <h4 id=lname>Luke Eder</h4>
</li>
</ul>
</div>

http://codepen.io/creativemind1/pen/PNVJyw

好吧，如果你可以编辑你的手机，你可以轻松调整它。了解如何使用media queries

Answer 4

在这里，我修复了您的代码，看看jsfiddle上的更新代码。我将每一方合并到它自己的div中，然后我将它漂浮到每一方。

请注意您编码的方式 - 不要将ID用于不需要ID的元素，环绕类和带引号的ID：

<div class="lg"></div>

HTML也是为层次结构设计的 - 如果两个元素彼此相关，那么HTML应该反映出来，而不是仅仅依赖于CSS。诸如屏幕阅读器之类的东西会被那些不那么重要的东西所混淆，而且一旦你进入网站开发区，这可能是你想要摆脱困境的东西。

这是新的CSS：

body {
  margin: 15px;
}
.left, .right {
  width: 20%;
  font-family: Futura, Arial;
  font-weight: 700;
}

.left img, .right img {
  max-width: 100%;
}
.left {
  float: left;
}

.right {
  float: right;
  text-align: right;
}

和html :(用你自己的图片替换img源码）

<div class="left">
  <img src="http://placehold.it/200x200" />
  <h4>Garrett O'Connor</h4>
</div>
<div class="right">
  <img src="http://placehold.it/200x200" />
  <h4>Luke Eder</h4>
</div>

Answer 5

p, h4 {  
  font-family: Futura;
  text-align: center;
}
div h4 {
    white-space: nowrap;
    margin: 0 4px;
}
div {  
    width: 20%;
    max-width: 140px;
    min-width: 100px;
}
#Garrett {
    float:left;
    margin-left: 100px;
}
#Luke {
    float: right;
    margin-right: 100px;
}

<p><b>techniques used in business, and use only the finnest materials on the market.</b></p>
<div id="Garrett"><img src="https://placeholdit.imgix.net/~text?txtsize=23&bg=FF6347&txtclr=ffffff&txt=Garrett&w=100&h=100"/>
<h4>Garrett O'Connor</h4></div>
<div id="Luke">
<img src="https://placeholdit.imgix.net/~text?txtsize=23&bg=FF6347&txtclr=ffffff&txt=Luke&w=100&h=100"/>
<h4>Luke Eder</h4></div>

调整窗口大小时的文字和图片html

5 个答案: