html - 水平布置图像和段落

我想用图像和段落创建一个手风琴。

的HTML

<div id="container">
  <section id="accordion">
    <div>
      <input type="radio" id="check-1" name="acr" />
      <label for="check-1">Hardware</label>
      <article>
        <div>
          <img src="image/1.png">
          <h1>Processor</h1>
          <p>Choose the processor that best meets your performance needs. Your MacBook Pro comes as standard with the 2.5GHz dual-core Intel Core i5 processor. For even faster performance, configure your MacBook Pro with the 2.9GHz dual-core Intel Core i7
            processor.</p>
        </div>
      </article>
    </div>

使用上面的标记，图像和段落将垂直显示。我需要水平显示它们。我将如何为此编写CSS？

最佳答案

只需使用CSS左右浮动图片即可。

例：

div#container section div article div img{
  float: left;  /* so that it moves to the left and the text is to the right */
  margin: 10px;  /* so that it looks nice */
}

Working Demo

Here is a good tutorial about aligning images with text.

关于html - 水平布置图像和段落，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27119135/