Проблема с форматированием при использовании функции отображения CSS для добавления таблицы в HTML

Question

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

.col-container {
    width: 100%;
    display:table;  /*create as table and behave like table*/
}
.col {
    display: table-cell; /* created as table td and behave like td */
    padding: 20px;
}       
#pics { 
    float: right;
    width: 200px;  
    padding: 5px;
}

<header>
    <h1>Resume</h1>
    <hr>
    <div class="col-container">
        <div class="col">
            <h2>Personal details</h2>
            <p>  Name </p>
            <p>  Name </p>
            <p>  Name </p>
            <p>  Name </p>
        </div>
        <div class="col" id="pics">
            <p> 
              <img src="https://www.photodigital.co.nz/wp-content/uploads/2012/11/passport-sample.jpg" id="pics">
            </p>
        </div>
    </div>
</header>

Answer 1

Если вы хотите отобразить детали и фотографию в одну строку, вы можете попробовать создать 2 div метки. Оба они имеют класс float-left. Используя свойство float: left;, мы делаем встроенные теги 2 div.

.float-left {
  float: left;
}

.details {
  margin-right: 20px;
}

.photo img {
  width: 200px;
}

<header>
    <h1>Resume</h1>
    <hr>
    <div class="float-left details">
        <h2>Personal details</h2>
        <p>  Name </p>
        <p>  Name </p>
        <p>  Name </p>
        <p>  Name </p>
    </div>
    <div class="float-left photo">
        <img src="https://www.photodigital.co.nz/wp-content/uploads/2012/11/passport-sample.jpg" id="pics">
    </div>
</header>

Затем вы можете добавить другие стили к каждому тегу div, например: отступы, поля, ширина, высота ...

Или, если вы хотите изменить положение фотографии на левой стороне, продолжайте использовать два тега div, просто обновите содержимое и классы details/photo

.float-left {
  float: left;
}

.details {
  margin-left: 20px;
}

.photo img {
  width: 200px;
}

<header>
    <h1>Resume</h1>
    <hr>
    <div class="float-left photo">
        <img src="https://www.photodigital.co.nz/wp-content/uploads/2012/11/passport-sample.jpg" id="pics">
    </div>
    <div class="float-left details">
        <h2>Personal details</h2>
        <p>  Name </p>
        <p>  Name </p>
        <p>  Name </p>
        <p>  Name </p>
    </div>
</header>