HTML отображается неправильно? (пакет laravel-dompdf)
Я хочу получить такой макет:
Но у меня такое:
C внутри div «.post_admin» находится перед b в div «.post_date», и между ними нет разделения между div «.post_date» и «.post_admin».
Вы знаете, в чем может быть проблема? У меня есть этот код в файле, а HTML и CSS в этом файле отображаются в файле PDF, который загружает пользователь:
<!doctype html>
<html>
<head>
<style>
.wrapper{
width: 600px;
display:block;
margin: auto;
border:1px solid gray;
text-align:center;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:left;
}
.post-info{
width:100%;
display: flex;
height: 100px;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
flex: 1;
box-sizing:border-box;
text-align: left;
}
.post-admin{
padding:20px;
box-sizing:border-box;
text-align: left;
flex: 1;
}
.post-category{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
.post-tags{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
</style>
</head>
<body>
<ul>
@foreach($posts as $post)
<div class = "wrapper">
<div class = "post-title">
a
</div>
<div class = "post-info">
<div class = "post-date">
b
</div>
<div class = "post-admin">
c
</div>
</div>
<div class = "post-category">
<span>d</span>
<span> e</span>
</div>
<div class = "post-tags">
<span>f</span>
<span>g</span>
</div>
</div>
@endforeach
</ul>
</body>
</html>
Спасибо, но это тоже не отображается правильно.
см. этот учебник: youtube.com/watch?v=k32voqQhODc&t=1088s, и я бы рекомендовал использовать сетку css: youtube.com/watch?v=jV8B24rSN5o&t=53s
Может быть, проблема в браузере? Я скопировал ваш HTML + CSS в JSFiddle, и он отобразится в нужном вам макете.
Спасибо, что HTML и css используются для стилизации файла pdf. В jsfiddle это тоже кажется правильным, но в файле pdf он выглядит так, как на изображении.
Ой, я упустил из виду эту часть. Вы знаете, какой движок / программное обеспечение используется для рендеринга HTML в PDF? Я предполагаю, что он использует более старую версию WebKit, которая не полностью поддерживает flexbox. В противном случае я не могу угадать решение без более подробной информации, поскольку html и css технически верны.
Я использую этот пакет "github.com/barryvdh/laravel-dompdf". Вы знаете, почему b и c не отображаются должным образом с поплавками? (jsfiddle.net/zgy86wfj)
Попробуйте это. Ячейки отображались неправильно для вас, так как ваши .post-date и .post-admin div widths должны быть 50%, а heights - 100%. Кроме того, вам нужно только float:right .post-admin; .post-date не обязательно должно иметь значение макета. К сожалению, мы не смогли решить проблему с гибкостью. Я не большой поклонник поплавков, но в данной ситуации это кажется уместным.
Ответы 1
Я не могу много сказать о пакете, который вы используете для преобразования HTML в PDF b / c. У меня нет опыта работы с ним, но я предполагаю, что он не полностью поддерживает flexbox с css подходит для желаемого макета.
Убрав flexbox с инструментария, вы можете попробовать вручную стилизовать ячейки .post-info с display: inline-block, width: 50% и height:100%. Вы можете передать макет float: right .post-admin в устранить пробел между элементами inline-block.
Все вместе:
.wrapper{
width: 600px;
margin: auto;
border: 1px solid gray;
text-align: center;
}
.wrapper > div:not(:last-child) {
border-bottom: 1px solid gray;
}
.post-title{
padding: 20px;
text-align: left;
}
.post-info{
width: 100%;
height: 100px;
}
.post-date{
display: inline-block;
width: 50%;
height: 100%;
padding: 20px;
border-right: 1px solid gray;
box-sizing: border-box;
text-align: left;
}
.post-admin{
display: inline-block;
float: right;
width: 50%;
height: 100%;
padding: 20px;
box-sizing: border-box;
text-align: left;
}
.post-category{
padding: 10px;
text-align: left;
}
.post-tags{
padding: 10px;
text-align: left;
}<div class = "wrapper">
<div class = "post-title">a</div>
<div class = "post-info">
<div class = "post-date">b</div>
<div class = "post-admin">c</div>
</div>
<div class = "post-category">
<span>d</span>
<span>e</span>
</div>
<div class = "post-tags">
<span>f</span>
<span>g</span>
</div>
</div>Спасибо, но HTML тоже отображается некорректно.
Вы можете связаться с разработчиком прямо на его GitHub страница проблем
я думаю, что оболочка должна быть
display: flex;, а дети -flex: 1;..etc, а потом займемся выравниванием элементов