HTML CSS 文本，如图像旁边的侧边栏答案

【问题标题】：HTML CSS text like a sidebar next to an imageHTML CSS 文本，如图像旁边的侧边栏
【发布时间】：2014-07-22 17:42:10
【问题描述】：

我的网站有问题。我想在图像左侧“打印”文本。但我不知道该怎么做。这是我的网站：link 这里应该是这样的：link

有人可以帮帮我吗？

【问题讨论】：

请在您的问题中发布完整的代码示例。
哦，我用的是jadejs和手写笔，你不能右键查看代码吗？顺便说一句，我没有代码，因为我不知道该怎么做
你可以制作一个CSS文件来打印..

标签： html css image styles sidebar

【解决方案1】：

将img 标记替换为：

<img src="http://martin-fischer.tk/assets/img/AVRStick.png" style="float: left;">
<p>Here the text</p>

Demo.

【讨论】：

【解决方案2】：

更新：根据所附图像将文本与图像对齐，您可以使用float:left。而且您的布局不会损坏，因此您必须使用clearfix Method 清除float，或者您可以在父div 上使用overflow:hidden。除了更安全的一面，您还可以display:inline-block。

通过使用@media 查询，您可以为screen、mobile 创建样式表，甚至可以在打印文档时控制元素。看看 DEMO。

在此示例中的打印预览中，您可以看到更改。元素位置更改为打印，字体将变为红色。

@media screen {
    p {
        font-family: verdana,sans-serif;
        font-size: 14px;
      float:left;
    }
  img{float:left;}
}

@media print {
    p {
        font-size: 20px;
        color: red;
       float:right;
    }
  img{float:right;}
}

【讨论】：

他不希望用户打印页面时出现文本。他希望文本出现在 USB 旁边。
@MohammadAreebSiddiqui 那是什么意思 I want to "print" text on the left of an image.
你的解释是错误的，不是我问的，但是浮动离开它可以工作^^
他的意思是他想把文字放在图片的左边
@user3859452 我的回答是你想要的吗？