Text neben Bild auf der rechten Seite einfügen

Question

Der Text möchte nicht auf der rechten Seite des Bildes umbrechen. Es soll auf der rechten Seite mit ein wenig Abstand dazwischen sein.

Dies ist, was die Bar soll wie und unter auszusehen hat einen Abstandhalter (Linie) http://i.imgur.com/jYWmU7Y.png sein, die Gonna Stil 14 auf diesen Link https://codepen.io/ibrahimjabbari/pen/ozinB

Hoffentlich jemand mir helfen kann, ist.

Snippet:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; 
 
    vertical-align: baseline; 
 
    outline: none; 
 
} 
 

 
.container { 
 
    margin-left: auto; 
 
    margin-right:auto; 
 
    display:block; 
 
    width: 65%; 
 
} 
 

 
#statistics_background { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    border: 1px solid; 
 
    width: 100%; 
 

 
    -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%); 
 
    -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%); 
 
    border-image: linear-gradient(to bottom, #006184 0%, #303142 100%); 
 
    border-image-slice: 1; 
 
} 
 

 
.statistics_header { 
 
    margin: 15px; 
 
} 
 

 
.summoners_name { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<?php define('DeniedAccessFiles', TRUE); ?> 
 

 
<?php include 'header.php'; ?> 
 
<div class="logo"> 
 
    <a href="<?php echo "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"><img src="images/logo.png"></a> 
 
</div> 
 
<div class="container"> 
 
    <div id="statistics_background"> 
 
    <div class="statistics_header"> 
 
     <img class="summoners_icon clearfix" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=95%C3%9795&w=95&h=95" alt="Summoners Icon"> 
 
     <div class="summoners_name"> 
 
     <h3>Summoners Name</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<?php include 'footer.php'; ?>

Answer 1

Try this Float Ihr Bild und. Text links und wenden Sie Ihre Clearfix auf das Eltern, NICHT das Bild. (Put mit dem enthaltenden Element.) Wenn Sie eine Eigenschaft löschen, Ihr Clearing darunter, nicht die eigentliche Eigenschaft selbst, die schwebt Wenn du links drückst, wird dein div durch das Brechen der Stapelreihenfolge zusammengebrochen, aber der Clearfix wird es besser machen. Floating Right löst Ihr Problem nicht.

Geben Sie den divs eine Eigenschaft width innerhalb des Containers. Ich möchte das nicht für dich lösen, also schreibe ich nicht die genaue Codeantwort aus. Sie möchten jedoch, dass sich die enthaltenen Elemente in Bezug auf die Breite innerhalb des Containers befinden. Denken Sie daran, dass die Breite nicht für die Füllung und den Rand verantwortlich ist. Wenn Sie also Platz dazwischen haben möchten, könnten Sie etwas wie 28% und 68% mit 1% Rand und Abstand versuchen. Alternativ können Sie die Calc-Parameter verwenden (nicht IE8 unterstützt)

Beispiel:

<div class="container clearfix"> 

CSS:

.container{ 
width:100% 
}; 

.img-icon{ 
width:30%; 
float:left; 
}; 

.summoners-name{ 
width:70% 
float:left; 
}; 

aus dem Code: - dieses Beispiel hat seine eigenen Probleme - aber diese nur gibt Ihnen eine Vorstellung davon, wie Sie Ihre Gegenstände richtig schweben und saubermachen können, um richtig zu sitzen.

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<?php define('DeniedAccessFiles', TRUE); ?> 

<?php include 'header.php'; ?> 
<div class="logo"> 
    <a href="<?php echo "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"><img src="images/logo.png"></a> 
</div> 
<div class="container clearfix"> 
    <div id="statistics_background clearfix"> 
    <div class="statistics_header"> 
     <img class="summoners_icon " src="https://placeholdit.imgix.net/~text?txtsize=12&txt=95%C3%9795&w=95&h=95" alt="Summoners Icon"> 
     <div class="summoners_name"> 
     <h3>Summoners Name</h3> 
     </div> 
    </div> 
    </div> 
</div> 
<?php include 'footer.php'; ?> 

CSS:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; 
    vertical-align: baseline; 
    outline: none; 
} 

.container { 
    margin-left: auto; 
    margin-right:auto; 
    background-color: rgba(0, 0, 0, 0.7); 
    width: 65%; 
} 

#statistics_background { 
    margin:0 auto; 
    border: 1px solid; 
    width: 65%; 


    -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%); 
    -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%); 
    border-image: linear-gradient(to bottom, #006184 0%, #303142 100%); 
    border-image-slice: 1; 
} 

.statistics_header { 
height:150px; 
} 

.summoners_name { 
    float: left; 
    padding:20px; 
} 
.summoners_icon{ 
    float:left; 
    padding:20px; 
} 

Answer 2

Sie schwebte den Text richtig.

.summoners_name { 
    float: right; 
} 

Answer 3

messed Sie mit Ihrem Anker bis tag.You haben eine extra „hinzugefügt>

korrigieren EDIT:.

Verwendung <a href="<?php echo 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"><img src="images/logo.png"></a>