Как поместить текст рядом с изображением?

Question

Итак, я прочитал около ста вопросов и ответов по этому вопросу, и, очевидно, я здесь что-то не так делаю ... (не обращайте внимания на серьезность текста, я делаю кредитный калькулятор в качестве теста способности)

Я хочу, чтобы мое изображение, рядом с моим текстом в той же строке, выглядит так:

Вот мой соответствующий код

.topContainer {
  background-color: #0f3759;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}

.topContainer p {
  width: 60%;
  float: left;
}

.topContainer img {
  margin-left: 35%;
  width: 40%;
}

<div class="topContainer">
  <h2 id="headline">Personal Loans</h2>
  <p id="headlineText">18.9% APR Representative on loans between £100,000 to £1,000,000 over 1 to 10 years.</p>
  <p id="headlineDesc">Other loan amounts and terms are available, at different rates. Our loans start at £100,000.
    <br><br>Thinking about a big bet or buying an asset? Need some extra cash to pay off some debts? A Nub Bank personal loan can help make it happen.
    <br><br>Lending and rate are subject to our assessment of your circumstances. Available to UK residents aged 18 and over.</p>
  <img id="cash" src="https://cdn1.iconfinder.com/data/icons/flat-world-currency-1/432/Flat_Currency_Pound-512.png" width="300" height="300">
</div>

Answer 1

Как предложил PaulieD, удаление поля изображения помещает все в одну строку.

Ваша проблема в том, что вы просите, чтобы текст занимал 60% ширины, а изображение - 40%. ширины и поля изображения, чтобы занять еще 35% ширины. Очевидно, что это занимает более 100% страницы, поэтому шунтирует лишние вещи ниже. Вот как это выглядит без наценки:

.topContainer {
  background-color: #0f3759;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}

.topContainer p {
  width: 60%;
  float: left;
}

.topContainer img {
  width: 40%;
}

<div class="topContainer">
  <h2 id="headline">Personal Loans</h2>
  <p id="headlineText">18.9% APR Representative on loans between £100,000 to £1,000,000 over 1 to 10 years.</p>
  <p id="headlineDesc">Other loan amounts and terms are available, at different rates. Our loans start at £100,000.
    <br><br>Thinking about a big bet or buying an asset? Need some extra cash to pay off some debts? A Nub Bank personal loan can help make it happen.
    <br><br>Lending and rate are subject to our assessment of your circumstances. Available to UK residents aged 18 and over.</p>
  <img id="cash" src="https://cdn1.iconfinder.com/data/icons/flat-world-currency-1/432/Flat_Currency_Pound-512.png" width="300" height="300">
</div>

Подобно тому, как «лучшие практики с современным HTML / CSS», более простой способ добавить пробелы между элементами - использовать что-то вроде flex или grid , Ниже приведен пример использования сетки с промежутком между элементами:

.topContainer {
  background-color: #0f3759;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}

.mainBody {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-column-gap: 50px;
}

<div class="topContainer">
  <h2 id="headline">Personal Loans</h2>
  <div class="mainBody">
    <div class="text">
      <p id="headlineText">18.9% APR Representative on loans between £100,000 to £1,000,000 over 1 to 10 years.</p>
      <p id="headlineDesc">Other loan amounts and terms are available, at different rates. Our loans start at £100,000.
        <br><br>Thinking about a big bet or buying an asset? Need some extra cash to pay off some debts? A Nub Bank personal loan can help make it happen.
        <br><br>Lending and rate are subject to our assessment of your circumstances. Available to UK residents aged 18 and over.</p>
    </div>
    <img id="cash" src="https://cdn1.iconfinder.com/data/icons/flat-world-currency-1/432/Flat_Currency_Pound-512.png" width="300" height="300">
  </div>

Answer 2

попробуйте это:

.topContainer {
  background-color: #0f3759;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}
.contain{
  display: flex;
}

.topContainer .text_block {
  float: left;

}

.topContainer img {
  width: 40%;
  height: auto;
  float: right;

}

<div class="topContainer">
  <h2 id="headline">Personal Loans</h2>
  <div class="contain">
  <div class="text_block">



  <p id="headlineText">18.9% APR Representative on loans between £100,000 to £1,000,000 over 1 to 10 years.</p>
  <p id="headlineDesc">Other loan amounts and terms are available, at different rates. Our loans start at £100,000.
    <br><br>Thinking about a big bet or buying an asset? Need some extra cash to pay off some debts? A Nub Bank personal loan can help make it happen.
    <br><br>Lending and rate are subject to our assessment of your circumstances. Available to UK residents aged 18 and over.</p>
      </div>
  <img id="cash" src="https://cdn1.iconfinder.com/data/icons/flat-world-currency-1/432/Flat_Currency_Pound-512.png" width="300" height="300">
  </div>
</div>

Я поместил два тега абзаца в div контейнера, затем использовал flex box, чтобы поместить и контейнер абзаца, и контейнер изображения в одну строку - вы можете затем установить любые отступы или поля на их. Поскольку вы установили ширину изображения в процентах, я также установил ее высоту в автоматический режим, чтобы сохранить соотношение.

Answer 3

Использовать bootstrap очень просто и избавить вас от большого количества css кодирования ...

... но если вы не хотите использовать, я бы сказал, используйте для этого flex box. :) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Вы можете увидеть мое решение для вас здесь

.topContainer { display: flex; }