Question

<article>
  <h2 id="aboutme">About me </h2>
  <p>I currently studying design and coding in Nanyang Polytechnic . I also have
  passion or gaming</p>
  <img src="index.images/rainbow%20six%20siege.jpg" class="image2"/>
</article>
<aside>
  <h2>.skills</h2>
  <div id="image2">
    <img src="index.images/skill.jpg"/>
  </div>
</aside>

我还不熟悉编码，原谅我。我需要帮助设计样式，使其看起来像图像中的那些：https://i.stack.imgur.com/xsQj4.jpg

Answer 1

您只需复制并粘贴此代码即可。它会工作。 Here's the Example

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<h1 class="text-center">Hi I'm Owen</h1>
<div class="row">
  <div class="col-xs-6">
    <h2>About me</h2>
  </div>
    <div class="col-xs-6">
     <h2>.skills</h2>
  </div>
</div>
<div class="row">
  <div class="col-xs-3">
    <img src="index.images/rainbow%20six%20siege.jpg" class=""/>
  </div>
  <div class="col-xs-3">
    <p>I currently studying design and coding in Nanyang Polytechnic . I also have
passion or gaming</p>
  </div>
  <div class="col-xs-6">
    <img src="index.images/skill.jpg"/>
  </div>
</div>

开始使用bootstrap - http://getbootstrap.com/getting-started/

希望有所帮助！欢呼声。

Answer 2

非常简单的JSfiddle，只需要你需要的东西。

https://jsfiddle.net/8k5fLxsn/

HTML：

<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png">
<p>
    Text next to image. Put anything you want here.
</p>

CSS：

img {
  float: left;
  margin-right: 20px;
}

如何将图像和内容并排放置

2 个答案: