Стиль CSS для логотипа и текста в одной строке

Question

Я пытаюсь добиться следующего и не могу заставить его делать то, что я хочу.

• 90% страницы и по центру
• 5px подчеркивание
• логотип слева
• текст справа, но справа внизу выровнено

.box2 {
  border-bottom: 5px solid #2ea9e0;
  overflow: hidden;
  max-width: 90%;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
  vertical-align: bottom;
  overflow: hidden;
}

img {
  width: 115px;
  height: 91px;
}

<div class="box2">
  <p class="alignleft"><img src="http://placehold.it/115x91" alt=""></p>
  <p class="alignright">Hello</p>
</div>
<div style="clear: both"></div>

Что я хочу сделать

Что я получаю

Answer 1

Вы можете сделать это с помощью Flexbox :

.box2 {
  display: flex; /* displays flex-items (children) inline */
  align-items: flex-end; /* vertically aligns them at the bottom */
  justify-content: space-between; /* places them away from each other as far as it can */
  border-bottom: 5px solid #2ea9e0;
  overflow: hidden;
  max-width: 90%;
  margin: 0 auto;
}

img {
  width: 115px;
  height: 91px;
}

<div class="box2">
  <p class="alignleft"><img src="http://placehold.it/115x91" alt=""></p>
  <p class="alignright">Hello</p>
</div>

Answer 2

.box2{
   align: center;
   border-bottom: 5px solid #2ea9e0;
   overflow: hidden;
   max-width: 90%;
   margin-left:15px
}

.alignleft {
    float: left;
}
.alignright {
    float: Right;
        vertical-align: bottom; 
        overflow:hidden;
     
        padding: 0px 0px 0px 10px;
}

<div class="box2">
<p class="alignleft"><img src="logo.jpg" alt="" width="115" height="91" /></p>
<p class="alignright">Hello</p>
</div>

Answer 3

Использовать свойство flex.С этим нет необходимости для свойства float.

 

.box2{
   display: flex;
   align-items: flex-end;
   margin: 0 auto;
   border-bottom: 5px solid #2ea9e0;
   overflow: hidden;
   max-width: 90%;
}

.alignright {
     margin-left: auto;  
     margin-bottom: 0;      
     padding: 0;
}
p {
     padding: 0;
     margin-bottom: 0;      
}

<div class="box2">
<p class="alignleft"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAQEBAPDxIPDQ8PDg8QDQ8PDw8PDw0PFRcWFhURFRUYHSggGB0lGxUVITEhJSktLi4uFx8zODMsNyguLjcBCgoKDg0OGBAQGi0eHR0tKy0tKzctKy4rLS0vLS0tLy0rLSsrLSsrLSs1LSstLS0tLS0rLisrLS0tLTctLS0tK//AABEIAKMBNgMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAABwMEBQYIAQL/xABEEAABAwICBgUJBAkDBQAAAAABAAIDBBEFIQYHEjFBURMyYXGxCBQiNXJ0gZGyJUJSoSNDYoKSs8HE0TOi0hVTk9Ph/8QAGgEBAAMBAQEAAAAAAAAAAAAAAAECAwQFBv/EACcRAQACAgECBQQDAAAAAAAAAAABAgMRMSFBBBIyUWETFCKxQpHR/9oADAMBAAIRAxEAPwCcUREBERAREQEREBck60/XOI+8n6WrrZck60/XOI+8n6WoNVREUJEREBERARFk8P0dragB0FLUysdukbDJ0due3bZA7boMYi2UaA4nxp2t9qppW/kXr4l0HxBv6ph7qmm/5oNdRZOp0erI+tBJbiWDpQO8svZY1zSCQQQRvBFiPgg8REQEREBERAU3eTPvxTuof7hQipu8mffindQ/3CCckRFKBERAREQEREBERAREQEREBERAREQFyTrT9c4j7yfpautlyVrS9c4j7yfpaolMNURfVl5ZNjxF7ZZXRzR6oxCYQUzQSBtSSPJbFAzi+R3AfmTkASgxkELpHNYxrpHuIaxjGlz3k7gAMyVI2jmqiZ4EmIyeaMOfm8Wy+pcM+serHw37R5gKQNFtF6XDGfoB0tQW2lq3tAlfzawfq2dgzPElZOSRBi8L0eoKK3m1NE14z6aQdNPe1rh777P7tgrmqqXOzcST2kleyyKxnlQUaiRYyokVeolWMqZUFvUSrEV+y8Wka2QcNsB1u7krmpmWKqZUGHrcJj3xkxn8Ju5v+QsI9tiQeBIPwWxTSLX3m5J5kn80Hwi9slkHiL6smymx8qbvJn34p3UP9woT2VN3k0jPFO6h/uEiSU4IiKUCIiAiIgIiICIiAiIgIiICIiAiIgLkvWj65xH3k/S1daLk3WePtjEfeT9LVEphqtksvuyEKm1tL3AMFmraiOmgF3vN3ON9iKMdaR54NA/oN5U+YHhUFBAKamHogh0shAElRJ/3H/nYbgPiVg9BMCFBSjbFqqpDX1J4xt3sgHKwzP7R7As86VXVXD5FbSSqlJMraWZB9TSqwnmVamhkqJY4ItjpJS4N6RzmMFmuebkAnc08Fk5NAsQP3qL/AM8//qQanUTLF1M6rYg4xySxOLS+GWSKTZJLdtji02JAJGXILDVM6D4qZljJ5V9VEyx80iD5nlyJ5AlYpXNTJlbmrZAX0OfzC+V6DZEquymykRsbcD1e/kqtlnM6TClsqavJr62J91D/AHChmymfybetifs0PjUKaz1JhNyIi0UEREBERAREQEREBERAREQEREBERAXJ+s31xiPvR+lq6wXJ+sz1xiPvR+lqrbhNeWs2Wx6A4YKitY54vFTDp5ARk5zSBGw97yDbiGuWu2UiavoOjpXS/eqZS6/OOO7Gj59Ifiq1Ws3h9Rc3JuTmVSdOmF4XU1X+hHtNuQZXno4QeW1vd+6Dbis63QKoI9KphjP4RC+UD97ab4K6rW5J1aSzrO4noVXRAuYIqpoGYicWS9+w/K3c6/YtNqJyC5rg5rmmz2uaWvY7k5pzBzGRQbHoXLfEqQftzfyZFMAUI6v5b4rSDtn/AJMim9TCHMelFRs4jXjh59VfzHLDTzLb59CK/EsSxB1PG2OAYhVA1M5LIbiQ3DAAXPPcLZWJCzrtR8xb6wj2rdXzN2zf2ul/ooERzSqzket10r1ZYpQNdKY21kDbl0tKXPLG83xkBw53FwLG5WgPfdEvJHXK+UWQwPA6qulENHDJUSbyGDJg5vcfRYO0kIMehUu4XqFrHtvU1VPTE/cjY+oIHaSWi/dfvVXENQVS1pNPWwTuG5ssL4AfiC/wQ2h1p4fLsKu2OuAfn3q80l0XrcOk6OsgfCTfYfk6KX2HjI928cQFjqV28fFVvHRNZ6qymbyb+tifs0PjUKGipl8nDrYn7ND41CrTla3CbURFqzEREBERAREQEREBERAREQEREBERB4uUtZnrjEfej9LV1auU9ZY+2MR96P0tVL8LV5au7IE9imzVXgLK2GJ7r+aU7GMeM2macC7ou4HN3O4GdyoTn6p+C620GwgUeHUdOBYsp2Ol7ZXjbkP8TilE2ZuNjWgNaA1rQA1rQA1oG4ADcFRqK6GMhsksUTiLgPkYwkc7ErUtZ2lElHHBT0zhHU1r3tbKbEwQsF5JGg5F2bQBzdfgofqHtaXG13ON3veS+WQ/ie92bj3lWmdK6dKAggEG4O4jMELVtO9EWV8TpIg1lbG09DJ1RKBn0Mh4tPA72k3GVwYm0G0zfh9TFGXHzKaVsc8JPoRF5sJmD7hBNzbIi987EdBpE7JjSAdWUpOMUrXAtc3zoPa7JzHNikDmkcCDcfBT8onlw0U+l8BaNllVTS1NgLDpDFIx/wAywO73FSwkIeNAG6w7slQZXwud0bZYnPuRsCRhfcbxa91BWu3Tmd9TJhlNI6KngAbVGNxa6olcLljnD7jQQLcTe97BRG0WIIyINwRkQeYKbTp2yoM13avGRNditEzYbtDz6Fgs0Fxt5w0cMyA4DnfmsvqO05mq+kw6se6aWGLpaaZ5Je+IENdG88SCWkE5kE8lKtfRsnikglAdHNG+ORp3FjgQR8ipQ5A0W0fmxGrho4Mnyu9J5BLYYxm+R3YB8zYcV1dopo1TYbTNpqVuy0WMjzbpJ5OMjzxJ+Q3DJRtqC0fED8TmfYyw1JoGn8IjO1J8yWfwqVMbxNlJTT1Ut+jp4XyuA3u2RfZHad3xQXU0zGN2pHNjaN7nuDWj4lfNNVRyi8T2SgGxMb2vAPK4XIelWktViU7p6p5fcnoogT0VO07mMbuHDPebZ3VrgmNT0UrZ6WR1PKw+i9hsHDfsPG57ctxUbTp19jWE09ZA+mqY2zQyCzmu4Hg5p3tI4EZhcr6d6JSYTXGncTJC8bdLMRbpYjcWNstoHI919xClij190PRs6amqxNsN6YRNhMfSW9LYLng2vuutO1p6wsPxeCBsMNVFU0821HJMyEN6Nws9l2vJzIYd33UlEI+KmTycOtifs0PjUKHCFMnk49bE/ZofGoWVOWluE2IiLZmIiICIiAiIgIiICIiAiIgIiICIiDxcqayh9sYj7076Wrqtcq6yfW+I+9O+lqpfhanLVakegfh4rsfBqls1NTyszZLBE9p/Zc0EeK48lF2nuU/6j9KWzUow6R1p6Zu1T7RzlpXZgDmWE7NuA2VFJ7JtHdivKJwuRzaGrALoojLBKcyI3SbLmOPIEtIvzsoeZVygWD3EcidrxXX9dRRTxvhmY2aKRpbJG8Xa9p4EKMa7UfRukLoKmpp4yb9E5scwaOTXGxt33U2rM8FbRHKG8Fopqyqp6WMbT55mNyF9lt7veexrQSe5dcrV9DdA6LC7ugD5ah7dl9TMQ6Ut37DbABjb8AM7C97LaFNY1CLTuUaaU1bYtKMGLrAPpJ4gSbek/pQ35mw+KktQVr7nfFidBLEdiSKmEkTvwvbMXNPzAUt6IaRRYlSRVUVgXDZmjvcwTgDbjPcd3MEHip310jXTbnTWvhMlPi9Ztg2qJPOYXWyfHJmbdztpvwWqCJdaaV6J0mJxCKrYSWEmGZh2ZoHHeWOt2DIgg2FxktDi1G0ofd9ZVOj/AAtjhY+3LbsR+SpaszwvW0d2q6gsJkfiMlUARFTUz2OfwMspAazt9EOPy5roJY/AsEp6GFtPSxiGJtzYXJe473ucc3OPMrW9aulQoKF7I3AVdU10VK0H0mAiz5uwNB38y0K8dIUnrLF6l8QZM3F9g3vjNTMMrHo5bFh+Oy75LaNYGFPrMLraaO5kkgcY2je97CHtb8S0D4qCtVGkrcMrgZTs0tSwQVDjuiIN45T2Akg8g8ngulGm9iM75gjioraJjZaNS4qc093MHeDyVJzCunNL9U1BXyuqGOkop5CXSuhDTHK873ujI63aCL53uc1ZaN6l6CmkbNUSS4g5hu2ORrGU+1e4Loxcu3bibcwUiJTMxKFKXV5i8rGSx0U7o5GNfG70BtNcLg2JvmFbYxobiNFGJ6umkp4ukawPeWWLzcgZG/A/JdgBc8a9NLm1lXFQQOD4aN7jO5pu2SqORb+4ARfm5w4K0qo5KmPycevifs0PjUKHSpj8nLr4n7ND41Cxpy0twmtERbMxERAREQEREBERAREQEREBERAREQeFcrayR9r4j7076WrqorlbWR63xD3p30tVMnC9OWtWV1hNXJEY5YXuimgf+jkYbPY4biPgbW3EXCt7JCbPtweP9w/+LDs0jlOmieuSB7WxYm000oy85iY59PJ2uaLujJ7iO0blvEem2FOG0MQw+x51cDT8i665cIXyWq0ZvcnFCeNL9b1HBG+PDyK6pIs14DhTRE/ec8229+5t72sSFsDNY2D2F66nvYXzdv8AkuZtlfbWJ9f4PpQ3vXJjVNXVlNLSSsqI2UhY9zL2a/pCdk342WA0U0kqsMm6emIIfYTwPv0VQ0bg7kRnZwzF+IuFiGsVy2O4WF80+bcNa441pPGA618MqGgTvdh8tvSZUA9HfjszD0bd9j2LPO00woC//UMPt2VlOT8g665o6NfQiV48V8KTg+U2aSa3aOEFlC11fNmA6zoqZh5ue4Xd3NBB5hQvjOJT1k76mpeZZn2BO5rGjdGxv3Wi5sO0k3JJVPYTo1nfPNl64oqtSxb7oJrLnw9jaapY+spG5RbLh5xTN/AwuNntHBpItwNrBaZ0S+hAq1zeXhM083LofD9YmETtBFbBCTvbUu82eOy0lvyyVWt0+wmJpc6upZLC9oJBUvP7sW0VzoKZVPNslr95Hsz+3+W86da2pahj6fDmSUsTgWvqnkNqHt3ERtBPRgj719rPc05qHo4/0htuaPzKz1RGGgk5AAk9yw0AyLjveS7uHAK9Ms3iZVtSK6h9qYvJz6+J+zQ+NQoeUw+Tn18T9mh8ahXpyrfhNaIi3ZCIiAiIgIiICIiAiIgIiICIiAiIgFcr6x/W+Ie9O+lq6oXLOscfa+Ie9O+lqzycL05a3ZfMjLi2472nkRuK+7L2yw200+4ZNpt9x3OHJ3FfZCtjdp2xmPvjmOY7QrlpBzGYO481S0a6w0rO+j1rVVa1eMarhjFlazSIfLWK7iavljFcRtWF7NIh8mJfBjV1ZfQjWXnW8q0EaqNhV4yBXMdMqWy6TFGPZTKuylWUjpVcMpVhbxC8Y2HFIvX02SzjaZY7HKllPGXuzJ9GJnGR/IdnMqtMs3tFY5lNqxWNy1HSB+YhG82dJ2M4D4lY1fb3Oc5z3Hae87Tz28h2BfNl71K+WsVedadzt8lTD5OnXxP2KHxqFEFlL/k69fE/YofGoWuPlnfhNSIi6GQiIgIiICIiAiIgIiICIiAiIgIiIPFy5rGH2tiHvTvpauo1y/rFH2tX+8u8GrLLw0x8tasllU2U2Vzba6U7KnYsN2i7Tm5g3jtb/hXOymypixpVppA4XBBCvGBYowkHaYdh3H8Lu8K5grwCGyjozwJzYe53+VlfHvrVrW8d2TYFcMaqEbrq4jXFZ0QqNYriOJfERV9AAue9tLxD2GFXsMC9hjCvYY1xZMjWIfMUCuG0/YrhsbWNMkjmxxtzc97gxjR2uOQWtY1pxGwFlC0TP3ecyNIhb2sac5D2mw71lixZc86pG/nt/at8lacsjjmIQ0UYfLdz336GFv8AqSns5N5uOQ7Tko1xKukqJDLKQXEWa1vUiZ+Bv9TxSolfI90kr3SyP68jzdx7OwdgyCp7K+g8J4WuCPe08z/jhyZZvPwpWSyqbKbK69stKVlL/k79fE/YofGpUS7Klzyeh6eJexQ+NQtMU/kpeOiZkRF1MRERAREQEREBERAREQEREBERAREQFzHrDb9q1/vLvALpsrmjWCPtSu95d4BYZ/S0xctb2U2VVsllybb6U9lebKq2SybFPZXhZfI2I5HMKrZLJsWzINnONzouwG7P4SrmOtnbvEco7C6N39QlkskzE8xsjccLiPGCN8Mg9lzHf1V1HpAB+qn/AIY/+Sxtkss5xY57LxkvHdmRpSR1ad59uRjB+V1Tl0pqzcM6GnHAtYZXj4vy/wBqxVksqx4fDH8Y/f7TOS893lXNJM4OnkkqHDqmVxcG+y3c34BfGyqlkstt9melPZTZVSyWTYp7K82VVsvLJs0p7Klnyfh6eJexQ+NQoqIUsagh6eI+zReNQtcM/lCl/TKYERF2ucREQEREBERAREQEREBERAREQEREHi5q1getK73h3gF6i5/EemGuLlry9RFyNxERAXi9RAXi9RB4vURB4i9RAXi9RAXgXqICIiDxSvqD6+I+zR+M69RaYfXCmT0yl5ERd7mEREBERAREQEREH//Z" alt="" width="115" height="91" /></p>
<p class="alignright">Hello</p>
</div>

Answer 4

.box2{
   align: center;
   border-bottom: 5px solid #2ea9e0;
   overflow: hidden;
   max-width: 100%;
}

.alignleft {
    float: left;
    
}
.alignright {
		float: right;
        vertical-align: bottom; 
		margin-top:90px;
}

<div class="box2">
  <p class="alignleft">
   <img src="https://www.w3schools.com/howto/img_avatar.png" alt="" width="115" height="91" />
   </p>
<p class="alignright">HELLO</p>
</div>

Answer 5

flex поможет вам достичь этого.Добавлено немного css в .box2.Здесь align-items: baseline; с flex решит вашу проблему.

.box2{
   align: center;
   border-bottom: 5px solid #2ea9e0;
    overflow: hidden;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
        vertical-align: bottom; 
        overflow:hidden;
}

<div class="box2">
<p class="alignleft"><img src="http://via.placeholder.com/140x100" alt="" width="115" height="91" /></p>
<p class="alignright">Hello</p>
</div>
<div style="clear: both;"></div>