html - 水平布局图像和段落

Question

我想用图像和段落创建 Accordion 。

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？

Answer 1

只需使用 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.