Блог

Я столкнулся с проблемой, пытаясь заставить следующий пример работать: Экран с использованием Chrome debugger

Я хотел бы выровнять свои блоки заголовков с моими адресами, на самом деле я бы хотел, чтобы адреса начинались со строк номер 1.

Вот простой код, который я запускаю :

CSS

 #lawyerOfficeLinksContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.lawyerContract {
    grid-column: 1/2;
}

.lawyerDomiciliation{
    grid-column: 2/3;
}
 

HTML (с использованием Razor)

 <div id="lawyerOfficeLinksContainer">
        @foreach(var contract in Model.LawyerConsultModel.LawyerContractsList.Rows)
        {
            <text>
                <div class="lawyerContract">
                    <h3>Title</h3>
                    <div>
                        <b><label>Name :</label></b>
                        <span>Test Name</span>
                    </div>
                </div>
            </text>
        }
        @foreach (var dom in Model.LawyerConsultModel.LawyerDomiciliationsList.Rows)
        {
            <text>
                <div class="lawyerDomiciliation">
                    <label>Adress :</label>
                    <p>Test</p>
                </div>
            </text>
        }
    </div>
 

Вот демонстрация:

HTML:

 <div id="lawyerOfficeLinksContainer">
    <div class="left">
        @foreach(var contract in Model.LawyerConsultModel.LawyerContractsList.Rows)
        {
            <text>
                <div>
                    <h3>Title</h3>
                    <div>
                        <b><label>Name :</label></b>
                        <span>Test Name</span>
                    </div>
                </div>
            </text>
        }
    </div>
    <div class="right">
        @foreach (var dom in Model.LawyerConsultModel.LawyerDomiciliationsList.Rows)
        {
            <text>
                <div>
                    <label>Adress :</label>
                    <p>Test</p>
                </div>
            </text>
        }
    </div>
</div>
 

css:

  #lawyerOfficeLinksContainer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .left {
        grid-column: 1/2;
    }

    .right {
        grid-column: 2/2;
    }
 

Результат: