Question

我一直在使用lynda.com学习库的教程自学CSS。根据我所学到的，我逐渐意识到使用表格并不是布置页面的正确方法。直到现在我使用2列1行html表将我的文本放在左边的td中，将2张图片放在右边的td中，这给了我想要的效果但是如上所述，我已经学会了表格不应该像这样使用我应该以某种方式用css来实现这个目标。

所以我已经学会了一些关于css的知识，我试图复制我用表格实现的功能，但这次不使用表格，只使用css和html。

遗憾的是，我无法解决如何在此处插入代码，下面是一个指向我已经做过的代码集的链接。

http://codepen.io/stuartbennett/pen/GsDgu

正如您所看到的那样，它将图像对齐，但它们彼此相邻且位于所有文本之下。我希望页面右上角的2台计算机从与左侧文本相同的点开始，并且要在右侧的2台计算机上堆叠mcse图像，所有文本保留在左侧我正在测试非表格版本本地在我的硬盘上，而不是在现场网站，以便看到我想用css重新创建的表格的效果，请转到http://www.admiralsystems.co.uk/index.html。

我希望这对你来说足够具体。

Answer 1

我认为您正在尝试应用浮动：右侧的图像，它将其放在包含div的右侧，但包含div的仍然在字母下方。

尝试将float：right应用于包含div，或者查看w3schools上的float属性，该属性具有非常相似的示例。

Answer 2

您缺少课程homeLeft和homeRight的CSS，以下是设置两者float的示例：

.homeLeft{
  float:left;  
  width:600px;
}
.homeRight{
  float: right;
}

Answer 3

在你的css中应用以下更改：

 #content {
  float:left;
  width:100%;
  }
.homeLeft{
  float:left;
  width:70%;
  }
  .homeRight{
  float:right;
  width:30%;
  }

请参阅以下链接的源代码：由于宽度问题，它会在图像上显示文字，但在宽屏或任何分辨率下都不会出现问题

http://www.thesstech.com/youreditor?filename=dbadmin/15

Answer 4

我已经阅读了你的代码，从我的角度来看 - 作为一个初学者 - 它有点混乱。尝试一些关于类和样式的基本教程。例如所有these tutorials 关于浮动的教程和教程，如Floatutorial 以及有关定位元素和布局的任何教程。

基本上，您需要为图像和段落添加类，添加浮点数，边距和填充。 Floatutorial以一种简单的方式解释它。

Answer 5

这应该会产生预期的效果：

HTML

<div class="group">
  <div class="text">
    Your text here
  </div>

  <div class="images">
    <img src="image1.jpg">
    <img src="image2.jpg">
  </div>
</div>

CSS

// this is the clear fix, so the container doesn't collapse and has height
.group:after {
  content: "";
  display: table;
  clear: both;
}

.text {
  float: left;
  width: 70%;
}

.images {
  float: left;
  width: 30%;
}

你可以根据自己的需要进行调整，但是这会给你两列，嘿，它也是流畅的！只需添加媒体查询即可获得响应。也许是这样的：

@media (max-width: 767px) {
  .text, .images {
    float: none;
    width: 100%;
  }
}

如何将图像放在右侧，将文本放在css的左侧

5 个答案: