2017-01-27 2 views
-1
<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> 

Ich bin noch neu in der Codierung, entschuldige mich. Ich brauche Hilfe sie auf Styling wie die, die im Bild zu sehen: https://i.stack.imgur.com/xsQj4.jpgwie man Bild und Inhalt nebeneinander setzt

+0

https://jsfiddle.net/Lpjxse6L/ Diese Geige – Shubhranshu

Antwort

1

Sie können nur diesen Code kopieren und einfügen. Es wird klappen. 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> 

mit Bootstrap Get hier gestartet - http://getbootstrap.com/getting-started/

Hoffnung, das hilft! Prost.

+0

Dank für die Hilfe helfen kann sehr geschätzt –

+0

Glad I könnte helfen. Wenn ich Ihre Frage beantwortet habe, markieren Sie sie bitte als beantwortet. –

+0

aber wo ist CSS, wenn es ist, ich versuche, es in meinen Code zu setzen es zeigt nicht das gleiche wie deins –

-1

Sehr einfach JSfiddle hier mit genau was Sie brauchen.

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; 
} 
+0

Vielleicht könntest du erklären, was der "Float" tut, da diese Antwort niemandem mit einem komplexeren Problem wirklich helfen wird. –

Verwandte Themen