Делайте div переходить к следующему столбцу каждый раз, когда его значение делится на 5
Swiftmailer - еще один простой в использовании сценарий, который автоматически защищает от электронной почты и делает вложения легким. Я также настоятельно рекомендую использовать встроенную функцию mail() PHP.
Чтобы использовать:
- Загрузите Swiftmailer и поместите
libв вашем проекте - Включите основной файл с помощью
require_once 'lib/swift_required.php';
Теперь добавьте код, когда вам нужно отправить по электронной почте:
// Create the message
$message = Swift_Message::newInstance()
->setSubject('Your subject')
->setFrom(array('webmaster@mysite.com' => 'Web Master'))
->setTo(array('receiver@example.com'))
->setBody('Here is the message itself')
->attach(Swift_Attachment::fromPath('myPDF.pdf'));
//send the message
$mailer->send($message);
Более подробную информацию и параметры можно найти в Документах Swiftmailer .
2 ответа
Это потому, что div имеют display:block по умолчанию, что заставляет их занимать всю строку. Вы можете решить эту проблему, установив их на display:inline-block.
Однако есть гораздо более простой способ справиться с вашей проблемой. Нет необходимости использовать JS (или float ... юрг). Просто используйте Flexbox (правило CSS), и все готово:
.container {
display : flex;
flex-direction: column;
flex-wrap: wrap;
border: green dashed 2px;
height: 120px;
}
span {
height : 20%;
background: lightgreen;
outline: blue solid 1px;
}<div class="container">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
</div>
Я использовал трюк с CSS-свойством clear (как clear: both). Свойство clear определяет, по каким сторонам элемента плавающие элементы не могут плавать, поэтому это своего рода «сброс». Этот сброс происходит, когда j = 0, иначе мы генерируем первый элемент в этой строке. i + divider * j + 1 дает вам индекс текущего элемента (вы можете сделать математику с ручкой и бумагой, чтобы увидеть, что он работает соответственно).
class TodoApp extends React.Component {
constructor(props) {
super(props);
}
renderLogic() {
let items = [0,1,2,3,4,5,6,7,8,9,10,11,12,13];
let divider = 5;
let boxes = [];
for (let i = 0; i < divider; ++i) {
for (let j = 0; j < items.length / divider + 1; ++j) {
if (i + divider * j >= items.length)
continue;
if (j == 0) {
boxes.push((
<div key = {i + divider * j + 1} class="box newline">
{i + divider * j + 1}
</div>
))
} else {
boxes.push((
<div key = {i + divider * j + 1} class="box">
{i + divider * j + 1}
</div>
))
}
}
}
return boxes;
}
render() {
return (
<div class="sample-container">
{this.renderLogic()}
</div>
);
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app")).sample-container {
background-color: green;
}
.box {
background-color: green;
border: 1px solid black;
float: left;
margin: 5px;
width: 50px;
height: 50px;
}
.newline {
clear: both;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div> Примечание. Я использовал + 1 в {i + divider * j + 1} только для отображения. Надеюсь, что это соответствует вашим потребностям. Ура!